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

Posted 2023-04-14

【中文标题】在消费者之外更新反应上下文？

【英文标题】：Update react context outside of a consumer?

【发布时间】：2019-07-27 16:05:04

【问题描述】：

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

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

例如我可以有

<Updater onClick=updateCount/>

和

<Consumer value=count/>

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

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

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

【参考方案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 />;

【讨论】：

github.com/reduxjs/react-redux/issues/1177 这篇文章有一些很好的信息可能有助于解决这个问题。似乎最新版本的 redux 实际上在渲染方面也有一些类似的挫折，因为它也使用了 context api。我认为你是对的，需要另一个层，根据连接器中是否存在 mapStateToProps 有条件地使用上下文。

【参考方案2】：

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

这可以使用onlyUpdateForKeys HOC from recompose 轻松完成。

【参考方案3】：

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

检查这个example