Reactjs 尝试使用React上下文解决问题

我的同事发现了一个可能的问题。他在CodeSandBox中创建了两组代码来演示这个问题

Redux版本（无任何问题）

使用Chrome，请打开此链接：

在另一个选项卡中打开独立链接：

在standalone选项卡中，打开Chrome DevTools并单击React DevTools Components选项卡

在配置中，确保选中“组件渲染时高亮显示更新”

在文本框中键入，注意彩色矩形仅出现在组件1和2的周围

这是我们的基本情况，说明了我们希望使用每个按键重新渲染的内容

上下文版本（说明问题）

使用Chrome，请打开此链接：

在另一个选项卡中打开独立链接：

在standalone选项卡中，打开Chrome DevTools并单击React DevTools Components选项卡

在配置中，确保选中“组件渲染时高亮显示更新”

在文本框中键入。请注意，现在，组件3和整个应用程序都将在每次按键时重新呈现

还需要注意的是，

AppContext

中的嵌套上下文模式源自Kent C.Dodds：

---

我想知道我的同事是否发现了React上下文的一个基本缺陷，或者我们是否没有正确地使用它？换句话说，是否可以修改上下文代码，使组件3和整个应用程序不会在每次按键时重新呈现？

问题在于React的默认行为始终是递归呈现。当父组件渲染时，React将重新渲染该子树中的每个子组件

当您有一个存储状态并将其放入上下文的根组件时，该根组件中的

setState（）

会使其重新渲染，然后React会使所有子组件也进行渲染

---

为了避免这种情况，您需要在

AppInner

组件上添加

React.memo（）

（或

PureComponent

或使用

shouldComponentUpdate

）以防止其父级渲染时重新渲染。

感谢您的快速响应！我希望你能澄清一点：你描述事物的方式，正确地说你不考虑这个代码例子来说明上下文的缺陷吗？相反，我们只需要添加一些额外的代码来消除额外的渲染？有效地，是的。这是真正的标准反应行为和性能优化。提升状态以使其可用于需要访问它的组件，确定多余的渲染，根据需要优化这些子树的渲染。这里的诀窍是，整个树都需要可以访问上下文值，但您不希望更新强制呈现所有组件，只呈现订阅了上下文的组件。因此，必须在渲染上下文的组件内部立即阻止默认渲染。