javascript - 更新消费者之外的 react 上下文？

Question

我正在尝试了解新的 React 上下文 API 是如何工作的。

在 redux 中，组件可以在不知道状态的情况下知道调度操作。这允许更新 redux 状态，而不会导致不关心该状态的组件重新渲染。

例如我可以

<Updater onClick={updateCount}/>

和

<Consumer value={count}/>

Updater 连接到 dispatch(updateCount()) 并且 Consumer 通过 state.count< 连接到计数的当前值。当 state.count 更新时，只有 Consumer 重新呈现。对我来说，这是一个至关重要的行为。

在 React 上下文中，复制这种行为似乎非常困难。我希望能够更新状态，而不会导致想要更改上下文但实际上并不关心状态的组件进行不必要的重新渲染。

如果组件不在消费者内部，它们怎么可能触发对上下文的更新？而且我绝对不想通过在提供者级别设置状态来触发对整个树的更新。

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} />;
}