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.memo
我一直在尝试通过在组件上使用 React.memo 来提高渲染性能。它可以正常工作，直到我将它用于作为子项插入的集合中的每个组件。
我准备了点心HERE
要了解发生了什么，您需要打开控制台，因为其中显示了一些日志。
你会看到 WrapperMemo 通常会渲染 Child 组件（它们也被包裹在一些辅助组件中以检查一些我稍后会解释的内容）。
当您按下名为 SLICE MYNUMBERS 的第一个按钮时，您会看到 React.memo 的 isEqual 函数称为 isWrapperEqual returns 是的，但它仍然不会停止重新渲染 Child 组件。
然而，Wrapper 和所有其他辅助包装器组件 (ChildOk) 都没有被渲染！
当您单击任何 PRESS ME:[number] 按钮时，它会强制您重新渲染其他 Child 组件，而只有一个是正在修改中。
值得一提的是 TestCompMemo 不会在按下任何按钮时重新呈现 - 这是正确的行为。
1) 有什么解释吗？
2) 有没有一种方法可以在集合中的每个组件上使用 React.memo 以仅渲染更改的组件（如 Wrapper 中所示组件）？
- 有什么解释吗？
在您的小吃示例中，您在应用程序的顶层有一个 Context.Provider 包装器。
这就是导致重新渲染的原因。这是预期的行为，您可以在此处阅读更多相关信息：https://github.com/facebook/react/issues/15156#issuecomment-474590693
- 有没有办法在集合中的每个组件上使用 React.memo 以仅呈现更改的组件（如 Wrapper 组件中所示）？
不建议在每个组件上使用 React.memo。您可以 运行 发现组件不重新渲染的错误，并且您正在增加所有比较的开销。
如果您想优化应用程序，您可能需要 运行 探查器并找出应用程序的哪些部分正在减慢速度并从那里开始工作。
但是如果你想防止不必要的重新渲染，你可以将上下文使用提高几个级别并将 onPress 传递给子组件。
我一直在尝试通过在组件上使用 React.memo 来提高渲染性能。它可以正常工作，直到我将它用于作为子项插入的集合中的每个组件。
我准备了点心HERE
要了解发生了什么，您需要打开控制台，因为其中显示了一些日志。 你会看到 WrapperMemo 通常会渲染 Child 组件（它们也被包裹在一些辅助组件中以检查一些我稍后会解释的内容）。
当您按下名为 SLICE MYNUMBERS 的第一个按钮时，您会看到 React.memo 的 isEqual 函数称为 isWrapperEqual returns 是的，但它仍然不会停止重新渲染 Child 组件。 然而，Wrapper 和所有其他辅助包装器组件 (ChildOk) 都没有被渲染！
当您单击任何 PRESS ME:[number] 按钮时，它会强制您重新渲染其他 Child 组件，而只有一个是正在修改中。
值得一提的是 TestCompMemo 不会在按下任何按钮时重新呈现 - 这是正确的行为。
1) 有什么解释吗？
2) 有没有一种方法可以在集合中的每个组件上使用 React.memo 以仅渲染更改的组件（如 Wrapper 中所示组件）？
- 有什么解释吗？
在您的小吃示例中，您在应用程序的顶层有一个 Context.Provider 包装器。
这就是导致重新渲染的原因。这是预期的行为，您可以在此处阅读更多相关信息：https://github.com/facebook/react/issues/15156#issuecomment-474590693
- 有没有办法在集合中的每个组件上使用 React.memo 以仅呈现更改的组件（如 Wrapper 组件中所示）？
不建议在每个组件上使用 React.memo。您可以 运行 发现组件不重新渲染的错误，并且您正在增加所有比较的开销。
如果您想优化应用程序，您可能需要 运行 探查器并找出应用程序的哪些部分正在减慢速度并从那里开始工作。
但是如果你想防止不必要的重新渲染，你可以将上下文使用提高几个级别并将 onPress 传递给子组件。