Обновить контекст взаимодействия вне потребителя?

Question

Я пытаюсь понять, как работает новый контекстный API.

В редуксе компонент может знать о действиях диспетчеризации, не зная состояния.Это позволяет обновлять состояние редукции, не вызывая повторного рендеринга компонентов, которые не заботятся об этом состоянии.

Например, у меня может быть

<Updater onClick={updateCount}/>

, а

<Consumer value={count}/>

Updater подключено к dispatch(updateCount()), а Consumer подключено к текущему значению счета черезstate.count.Когда state.count обновляется, только Consumer перерисовывается.Для меня это решающее поведение.

В контексте реакции, кажется, очень трудно воспроизвести это поведение.Я хотел бы иметь возможность обновлять состояние, не вызывая ненужных повторных визуализаций компонентов, которые хотят изменить контекст, но на самом деле не заботятся о состоянии.

Как компоненты могут запускать обновления для контекстаесли они не внутри потребителя?И я определенно не хочу запускать обновление всего дерева, устанавливая состояние на уровне провайдера.

Answer 1

интересный вопрос. Не уверен, что вы можете обойтись без хотя бы дополнительного слоя (но рад, что его неправильно показали).

Может быть, использовать Memo или PureComponent для минимизации повторного рендеринга?

import React, { memo } from 'react';

function Widget({ setContext }) {
  return <button onClick={setContext}/>Click Me</button>;
}

export default memo(Widget);

...

function Wrap() {
  const { setSession } = useContext(SessionContext);
  return <Widget setSession={setSession} />;
}

Answer 2

Одним из возможных решений является преобразование ваших потребительских компонентов в чистые компоненты и сравнение со значениями, которые действительно важны для каждого компонента.

Это легко сделать, используя onlyUpdateForKeys HOC от рекомбинировать .