聊聊 React 里的 Memoize

有网友碰到这样的问题“聊聊 React 里的 Memoize”。小编为您整理了以下解决方案，希望对您有帮助：

解决方案1：

React 里的 Memoize

在 React 中，memoization 是一种优化技术，用于减少不必要的渲染和计算，从而提高应用的性能。Memoization 的核心思想是缓存计算结果，当相同的输入再次出现时，直接返回缓存的结果，而不是重新进行计算。在 React 中，这通常通过 useMemo 和 memo 两个 Hook 来实现。

一、何时使用 Memoization

React 的性能优化通常基于一个核心假设：UI 整体上是稳定的。这意味着在大多数情况下，组件的渲染是低频的，状态的变化不会过于频繁。然而，在某些情况下，局部状态可能会频繁更新，导致不必要的渲染。这时，memoization 就派上了用场。

二、useMemo 的使用

useMemo 是一个 Hook，用于缓存计算结果。它接受一个创建函数和一个依赖数组，当依赖数组中的值发生变化时，才会重新计算创建函数的结果，否则返回缓存的结果。

使用场景：当某个计算结果的依赖项不经常变化，但计算过程比较耗时或复杂时，可以使用 useMemo 来缓存结果。注意事项：useMemo 应该只用于优化性能，而不是改变逻辑。如果依赖项经常变化，或者计算过程并不耗时，那么使用 useMemo 可能会适得其反，增加不必要的开销。

三、memo 的使用

memo 是一个高阶组件，用于对函数组件进行性能优化。它接受一个组件和一个可选的比较函数，当组件的 props 发生变化时，会根据比较函数的结果来决定是否重新渲染组件。

使用场景：当某个组件的渲染开销较大，且其 props 中的某些值不经常变化时，可以使用 memo 来避免不必要的渲染。注意事项：memo 应该由组件的使用方来应用，而不是由组件本身来提供。这是因为组件本身通常不知道自身被使用时的环境，也无法判断传入的 props 是否有 memoization 的价值。

四、useCallback 和 memo 的关系

useCallback 是一个特殊的 useMemo，它用于缓存函数。当依赖项发生变化时，才会重新创建函数，否则返回缓存的函数。这通常用于避免在渲染过程中创建新的函数引用，从而防止子组件因为父组件传递的新函数引用而重新渲染。

成对出现：useCallback 和 memo 常常成对出现，因为 memo 需要比较函数引用是否相等，而 useCallback 可以确保函数引用在依赖项不变的情况下保持不变。注意事项：同样地，useCallback 也应该只用于优化性能，而不是改变逻辑。如果函数本身并不耗时或复杂，或者依赖项经常变化，那么使用 useCallback 可能会增加不必要的开销。

五、总结

大多数情况下不必考虑 rerender 的问题：React 的优化机制已经足够高效，大多数情况下不必过于担心渲染性能问题。找到频繁变更的状态所在的组件：如果确实存在性能问题，首先需要找到频繁变更的状态所在的组件。对状态消费者进行隔离：找到这个组件里频繁变更状态的消费者，并使用 useMemo 或 memo 对其进行隔离，以减少不必要的渲染。保持组件的通用性：在优化性能时，应尽量保持组件的通用性。如果确实需要针对特定场景进行优化，可以考虑使用特殊优化的组件版本。忘掉 useCallback 和 memo API 吧：在大多数情况下，并不需要显式地使用 useCallback 和 memo。只有当确实遇到性能问题时，才应该考虑使用这些优化手段。记住，优化应该是有针对性的，而不是盲目的。