不要过度优化你的 React App

𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝗶𝗻𝗴 的 𝘆𝗼𝘂𝗿 𝗥𝗲𝗮𝗰𝘁 的 𝗔𝗽𝗽

请查看视频了解更多详情：

https://youtu.be/2woSmgfUjC8

如果你有一个父子组件结构，那么每当父组件的状态发生变化时，它都会重新渲染。
你知道它甚至会重新渲染你的子组件吗？无论你的子组件是否使用任何 prop，它仍然会重新渲染。

理想情况下，只有在以下情况下，Child 才应该重新渲染：parent prop 或 child 内部使用的方法发生变化。

𝗛𝗼𝘄 𝘁𝗼 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 的发音 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 ?
答案是“𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼”

React.memo（是一个高阶组件）接受组件并记住包装组件的渲染输出。

因此，每当父级重新渲染时，对于子级，它都会比较道具，如果所有道具都相同，它会重复使用记忆结果，跳过下一次渲染。

特点：

• 按下“点击”按钮，更新状态，从而重新渲染
• 每次“父级”重新渲染时都会重新渲染（即使它不使用任何父级状态）
• 当“父级”重新渲染时不会重新渲染（因为它使用了记忆结果）

缺点：

1. 如果您在子组件中使用函数作为 prop，即使 props 相同，它仍然会重新渲染（我们将在下一篇文章中讨论）

2. 如果您考虑让每个组件都使用 React.memo，那么在某些情况下它可能会过度损害性能，它会首先比较 props，如果它们不一样，它仍然会重新渲染（额外的比较检查）

3. 检查一下分析器，看看是否值得使用它

4. 如果子组件正在重新渲染，这并不意味着成本高昂，除非它正在执行实际上执行真正的 DOM 更改的“提交”阶段。

5. 在防止重新渲染之前，请先修复缓慢的渲染。

请在评论中分享你的想法