性能优化是构建可扩展的 react 应用程序的一个关键方面。随着组件树的增长，不必要的重新渲染可能会减慢您的应用程序的速度。幸运的是，react 提供了两个有用的钩子——react.memo() 和 usememo()——它们通过记忆组件和值来帮助减少不必要的渲染。
在本文中，我们将深入探讨 React.memo() 和 useMemo() 之间的差异、何时使用它们以及需要避免的一些常见陷阱。
-
了解 useMemo：优化昂贵的计算
在 React 中，useMemo 钩子用于记忆昂贵的计算或操作的结果，防止它在每次渲染时重新计算。 useMemo 返回一个记忆值，React 仅在其依赖项之一发生更改时重新计算它。这有助于优化性能，尤其是在处理密集型操作时。
示例：
在此示例中，昂贵的计算（number * 2）将仅在 number 属性发生变化时重新计算，不会在计数状态导致的每次重新渲染时 。如果没有 useMemo，计算将在每次渲染时完成，可能会损害性能。
-
何时使用 useMemo()？
- 您有一个计算成本高昂的函数，不需要在每次渲染时重新运行。
- 计算涉及大量数据操作、依赖于稳定输入的过滤或排序。
与 React.memo() 一样，不要过度使用 useMemo() 进行简单计算，因为它会引入不必要的复杂性，并且可能不会提供显着的性能改进。
-
理解 React.memo：避免不必要的重新渲染
现在我们已经了解了 useMemo 如何优化昂贵的计算，接下来我们来谈谈在组件级别避免不必要的重新渲染。默认情况下，当父组件重新渲染时，其子组件也会重新渲染，即使传递给子组件的 props 没有改变。这就是 React.memo 发挥作用的地方。
React.memo 是一个高阶组件，记忆功能组件的结果。它确保子组件仅在其 props 发生更改时重新渲染。
示例：
在此示例中，当 otherState 切换时，ParentComponent 将重新渲染，但 ChildComponent 不会重新渲染，只要 count prop 保持不变。这可以通过防止不必要的重新渲染来优化性能。
-
何时使用 React.memo()？
- 您的组件使用相同的道具重新渲染。
- 组件渲染大型数据集或复杂的UI，其中不必要的重新渲染会降低性能。
但是，要小心。 过度使用 React.memo() 可能会产生相反的效果如果组件的 props 经常变化，因为 React 需要在每次渲染时比较新的和以前的 props。
-
React.memo() 和 useMemo() 之间的主要区别
- React.memo()：用于记忆整个组件以防止在道具未更改时重新渲染。
- useMemo()：用于记忆计算值以防止组件内不必要的重新计算。
本质上，React.memo() 优化组件，而 useMemo() 优化组件内的值或计算。
-
要避免的常见陷阱
- 通过记忆进行过度优化：React.memo() 和 useMemo() 都引入了额外的计算来检查依赖项或属性。如果您在无法从记忆中受益的组件中过度使用它们，可能会导致不必要的复杂性，甚至性能下降。
- 忽略 prop 突变：React.memo() 对 props 进行浅层比较。如果道具是复杂的对象或数组，即使是微小的变化也可能触发重新渲染。考虑将 useCallback() 与 React.memo() 结合使用来将函数作为 props 处理。
结论：
React.memo() 和 useMemo() 都是用于优化 React 应用程序的强大工具，但知道何时以及如何有效地使用它们是关键。首先分析您的应用程序，识别导致不必要的重新渲染的组件或计算，然后在有意义的地方应用记忆。
请记住，我们的目标不是记住所有内容，而是针对特定瓶颈来提高性能！
如果您喜欢这篇文章，请在 LinkedIn 上与我联系或在 Dev.to 上关注我，以获取更多 React 技巧和见解。有疑问或想分享您的经验吗？在下面发表评论！
