尝试解决React Context的问题

Question

我的同事已确定React Context可能存在问题。他已经在CodeSandBox中创建了两组代码来演示该问题。

Redux版本（可以正常使用）

1. 使用Chrome，请打开以下链接：https://codesandbox.io/s/redux-test-6hqzp
2. 在另一个标签中打开独立链接：https://6hqzp.csb.app/
3. 在独立选项卡中，打开Chrome DevTools，然后单击React DevTools组件选项卡。
4. 在配置中，确保选中“组件渲染时突出显示更新”。
5. 在文本框中输入内容，注意彩色矩形仅出现在Comp [onent] 1和2周围。
6. 这是我们的基本案例，说明了每次按键后我们希望重新渲染的内容。

上下文版本（说明问题）

1. 使用Chrome，请打开以下链接：https://codesandbox.io/s/context-test-1288z
2. 在另一个标签中打开独立链接：https://1288z.csb.app/
3. 在独立选项卡中，打开Chrome DevTools，然后单击React DevTools组件选项卡。
4. 在配置中，确保选中“组件渲染时突出显示更新”。
5. 在文本框中输入。请注意，现在，每次按键都会重新渲染组件3和整个应用程序。

还要注意，AppContext中的嵌套上下文模式派生自Kent C. Dodds：https://kentcdodds.com/blog/how-to-use-react-context-effectively

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

Answer 1

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

当您有一个存储状态并将其置于上下文中的根组件时，该根组件中的setState()使其重新呈现，然后React也将使所有子代也呈现。 / p>

为避免这种情况，您需要在React.memo()组件上添加PureComponent（或shouldComponentUpdate或使用AppInner），以防止重新渲染当其父级呈现时。