是否在更多地方使用反应上下文，成本更高？

Posted 2023-04-14

【中文标题】是否在更多地方使用反应上下文，成本更高？

【英文标题】：is using react context in more places, more costy?

【发布时间】：2021-07-24 21:35:25

【问题描述】：

<SuperComponent>
  <ChildComponent />
  <ChildComponent />
</SuperComponent>

假设我们有一个由reducer 控制的上下文，它是一个包含所有ChildComponents 所需数据的对象。假设我们有 10-15 个孩子，而不是 2 个孩子。

最好在SuperComponent 中调用一次useContext，然后将所需的数据作为道具传递给孩子，还是在每个ChildComponent 中单独调用useContext？

【问题讨论】：

更多的是个人选择。我的观点是将上下文从父母传递给孩子，因为道具更干净，而不是在每个孩子中使用useContext

【参考方案1】：

如果每个子组件只需要一小部分数据，那么让父组件获取整个对象一次，然后将单独的 props 传递给子组件会更高效。当上下文值改变时，父组件将被强制重新渲染，但如果每个子组件关心的部分没有改变，则可以通过使用 react.memo（或 shouldComponentUpdate）潜在地跳过其渲染。

如果每个孩子都需要所有数据，那么这不会让您跳过任何渲染；当上下文发生变化时，它们都必须渲染。所以在这种情况下，子组件直接使用上下文会更好，这样父组件可能会跳过渲染。

请注意，在这两种情况下，只有使用 react.memo 才能获得性能改进。如果你不这样做，那么无论如何都会一直重新渲染。