更聪明的优化：useMemo、useCallback 与 React.memo，这回不用盲目做优化了

当我们刚开始接触 React 时，很容易发现组件会不断地重新渲染。经验丰富的工程师可能会告诉你，重新渲染并没有什么大不了的。然而，随着应用程序变得更加复杂，组件的数量和状态也随之增加，重新渲染的次数就会变得非常频繁，从而导致性能问题。

为了解决这个问题，React 提供了三个强大的工具：useMemo、useCallback 和 React.memo。这些工具可以帮助开发者优化组件性能，避免不必要的重新渲染，并提升应用程序的整体性能。

useMemo

useMemo 允许开发者将一个函数的返回值缓存起来，以便在组件重新渲染时避免重新计算。这对于那些计算成本高昂的函数尤其有用，例如 API 调用或复杂的计算。

const memoizedValue = useMemo(() => {
  // 计算并返回一个值
}, [dependencyArray]);

在上面的示例中，memoizedValue 将被缓存起来，并且只有当 dependencyArray 中的任何一个值发生变化时才会重新计算。

useCallback

useCallback 允许开发者将一个函数缓存起来，以便在组件重新渲染时避免重新创建。这对于那些需要在组件重新渲染时保持其引用的函数尤其有用，例如事件处理函数。

const memoizedCallback = useCallback(() => {
  // 执行一些操作
}, [dependencyArray]);

在上面的示例中，memoizedCallback 将被缓存起来，并且只有当 dependencyArray 中的任何一个值发生变化时才会重新创建。

React.memo

React.memo 是一个高阶组件，它可以防止组件在 props 没有变化的情况下重新渲染。这对于那些不需要在 props 发生变化时重新渲染的组件尤其有用，例如纯组件。

const MyComponent = React.memo((props) => {
  // 渲染组件
});

在上面的示例中，MyComponent 将被包装在 React.memo 中，并且只有当 props 发生变化时才会重新渲染。

何时使用

useMemo、useCallback 和 React.memo 都可以用来优化组件性能，但它们在不同的情况下适用。

• useMemo： 当需要缓存一个计算成本高昂的函数的返回值时。
• useCallback： 当需要缓存一个需要在组件重新渲染时保持其引用的函数时。
• React.memo： 当需要防止组件在 props 没有变化的情况下重新渲染时。

总结

useMemo、useCallback 和 React.memo 是三个强大的工具，可以帮助开发者优化组件性能，避免不必要的重新渲染，并提升应用程序的整体性能。