🧠 React 优化：什么、何时、为何

Source: Dev.to

React.memo（记忆组件）

作用：
包装一个函数式组件。如果子组件的 props 与上一次渲染时相同，React 将完全跳过该组件的重新渲染。它是组件的“门卫”。

何时使用：
当你有一个渲染缓慢且经常在 props 实际未变化的情况下重新渲染的组件时。

useMemo（记忆值）

作用：
记忆一个计算函数的结果（值）。只有当依赖数组中的变量发生变化时，计算才会重新执行。

何时使用：
当你在组件内部有耗时或复杂的计算（例如：过滤、大量求和、排序），并且想避免在每次渲染时都重新执行时。

useCallback（记忆函数）

作用：
记忆函数本身的引用。防止 JavaScript 在每次渲染时创建一个位于不同内存地址的新函数。

何时使用：
几乎只在需要将函数作为 prop 传递给使用 React.memo 优化的子组件时使用。它确保子组件不会因函数引用变化而不必要地重新渲染，因为该 prop（函数）保持相同的引用。