React Native 如何在集合中的每个组件上使用 React.memo 以仅渲染更改的组件。 React.memo 的奇怪行为答案

【问题标题】：React Native how to use React.memo on every component from collection to render only changed ones. Strange behavior of React.memoReact Native 如何在集合中的每个组件上使用 React.memo 以仅渲染更改的组件。 React.memo 的奇怪行为
【发布时间】：2021-05-23 14:30:40
【问题描述】：

我一直在尝试通过在组件上使用 React.memo 来提高渲染性能。它可以正常工作，直到我在作为子项插入的集合中的每个组件上使用它为止。

我准备了零食HERE

要了解发生了什么，您需要打开控制台，因为显示了一些日志。您会看到 WrapperMemo，它通常会渲染 Child 组件（它们也被包裹在一些辅助组件中以检查我稍后会解释的内容）。

当你按下第一个名为 SLICE MYNUMBERS 的按钮时，你会看到 React.memo 的名为 isWrapperEqual 的 isEqual 函数返回 true，但它仍然不会停止重新渲染子组件。但是，Wrapper 和所有其他辅助包装器组件 (ChildOk) 都不会被渲染！

当您单击任何 PRESS ME:[number] 按钮时，它会强制您重新渲染其他子组件，而只有一个正在被修改。

值得一提的是，当按下任何按钮时，TestCompMemo 永远不会重新渲染 - 这是正确的行为。

1) 对此有什么解释吗？

2) 有没有办法在集合中的每个组件上使用 React.memo 以仅渲染更改的组件（如 Wrapper 组件中所示）？

【问题讨论】：

不要沉迷于渲染 - 沉迷于会导致性能问题的渲染。 React 开箱即用是愚蠢的，在遇到可能解决的性能问题之前，不要费心玩React.memo 之类的东西（除非你只是为了教育目的而这样做）。
感谢您的提示。我正在处理组件层次结构中的渲染瓶颈。发生了太多渲染器，从而减慢了用户交互/动画的速度。我找到了解决方法，但很好奇是否可以按照问题中所述的其他方式完成。

标签： reactjs react-native react-memo

【解决方案1】：

对此有什么解释吗？

在您的零食示例中，您在应用程序的顶层有一个 Context.Provider 包装器。

这就是导致重新渲染的原因。这是预期的行为，您可以在此处阅读更多信息：https://github.com/facebook/react/issues/15156#issuecomment-474590693

有没有办法在集合中的每个组件上使用 React.memo 以仅呈现已更改的组件（如 Wrapper 组件中所示）？

不推荐在每个组件上都使用 React.memo。您可能会遇到组件不会重新渲染的错误，并且会增加所有比较的开销。

如果您想优化应用程序，您可能需要运行分析器并找出应用程序的哪些部分正在减慢速度并从那里开始工作。

但如果您想防止不必要的重新渲染，您可以将上下文使用上移几个级别并将onPress 传递给子组件。

【讨论】：

非常感谢您给出的答案和解释一切的链接。