尝试解决 React Context 的问题

Question

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

Redux 版本（没有任何问题）

1. 使用Chrome，请打开这个link：https://codesandbox.io/s/redux-test-6hqzp
2. 在另一个选项卡中打开独立 link：https://6hqzp.csb.app/
3. 在独立选项卡中，打开 Chrome DevTools 并单击 React DevTools 组件选项卡。
4. 在配置中，确保选中"Highlight updates when components render"。
5. 在文本框中键入内容，注意彩色矩形仅出现在 Comp[onent] 1 和 2 周围。
6. 这是我们的基本情况，说明了我们期望在每次按键时重新呈现的内容。

上下文版本（说明问题）

1. 使用Chrome，请打开这个link：https://codesandbox.io/s/context-test-1288z
2. 在另一个选项卡中打开独立 link：https://1288z.csb.app/
3. 在独立选项卡中，打开 Chrome DevTools 并单击 React DevTools 组件选项卡。
4. 在配置中，确保选中"Highlight updates when components render"。
5. 在文本框中键入。请注意，现在，组件 3 和整个应用程序都在每次按键时重新呈现。

同样重要的是要注意 AppContext 中的嵌套上下文模式源自 Kent C. Dodds：https://kentcdodds.com/blog/how-to-use-react-context-effectively

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

Answer 1

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

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

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