Question

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

在redux中，组件可能不知道状态就知道调度动作。这允许更新到redux状态，而不会引起不关心该状态的组件的重新渲染。

例如我可以拥有

<Updater onClick={updateCount}/>

和

<Consumer value={count}/>

Updater连接到dispatch(updateCount())，而Consumer通过state.count连接到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

更新在使用者之外响应上下文吗？

3 个答案: