更新消费者之外的反应上下文？

Question

我试图了解新的 React context API 是如何工作的。

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

例如我可以有

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