尝试解决 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 的根本缺陷，或者我们没有正确使用它？换句话说，是否可以修改 Context 代码，使组件 3 和整个 App 不会在每次按键时重新渲染？

Answer 1

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

当您有一个根组件存储状态并将其放入上下文中时，该根组件中的 setState() 会导致它重新渲染，然后 React 会导致所有子组件也渲染。

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