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

Question

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

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

例如我可以

<Updater onClick={updateCount}/>

和

<Consumer value={count}/>

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

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

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

Answer 1

一个可能的解决方案是将您的消费者组件转换为纯组件并检查每个组件真正关心的值。

这可以使用 onlyUpdateForKeys HOC from recompose.

轻松完成

Answer 2

有趣的问题。不确定是否可以没有至少一个额外的层（但很高兴显示错误）。

也许使用 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 3

您可以尝试使用此库 react-hooks-in-callback 将上下文与您的组件隔离开来，并仅从中选择所需的状态值，

检查这个example

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

Update react context outside of a consumer?

javascript

reactjs

react-redux

react-context