从memo、useMemo及useCallback谈React性能优化之道

2024-02-20 08:12:55

在 React 开发中，性能优化是一个永恒的话题。面对日益复杂的应用场景，如何避免组件的无谓重新渲染，成为了提升用户体验的关键。 Hooks 的出现，为我们提供了一种全新的思路。其中，memo、useMemo 和 useCallback 三个钩子函数，正是解决性能问题的利器，它们巧妙地利用缓存机制，减少了不必要的计算和渲染，让我们的应用更加流畅。

memo：让函数组件告别重复渲染

在 React 中，当一个组件的 props 发生改变时，它默认会重新渲染。但很多时候，即使 props 改变了，组件的输出结果可能并没有变化。这时候，memo 就派上用场了。它像一个哨兵，守护着函数组件的入口，只有当 props 真正发生变化时，才会放行，允许组件重新渲染。

memo 的使用非常简单，只需要用它包裹住你的函数组件即可：

import { memo } from 'react';

const MyComponent = memo((props) => {
  // 组件逻辑
});

需要注意的是，memo 默认只会进行浅层比较，也就是说，它只会比较 props 中每个属性的值是否相等。如果你的 props 中包含了对象或数组等复杂数据类型，memo 就可能失效。这时，你可以传入一个自定义的比较函数，告诉 memo 如何进行深层比较。

useMemo：缓存计算结果，避免重复劳动

在某些场景下，组件的渲染需要进行一些复杂的计算。如果每次渲染都重新计算一遍，无疑会造成性能浪费。useMemo 就像一个勤劳的管家，它会将计算结果缓存起来，只有当依赖项发生变化时，才会重新计算。

useMemo 接受一个函数和一个依赖项数组作为参数，函数的返回值会被缓存，依赖项数组则用于控制缓存的更新。

import { useMemo } from 'react';

const MyComponent = () => {
  const expensiveResult = useMemo(() => {
    // 复杂的计算逻辑
  }, [/* 依赖项数组 */]);

  // 使用 expensiveResult
};

通过 useMemo，我们可以避免重复执行昂贵的计算，提升组件的渲染效率。

useCallback：让回调函数保持稳定

在 React 中，如果一个组件的 props 中包含了回调函数，那么每次组件重新渲染时，这个回调函数都会被重新创建。这可能会导致一些问题，例如子组件的无谓重新渲染，或者一些依赖于回调函数引用的逻辑失效。

useCallback 可以帮助我们解决这个问题。它会缓存回调函数，只有当依赖项发生变化时，才会返回一个新的回调函数。

import { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // 点击事件处理逻辑
  }, [/* 依赖项数组 */]);

  return <button onClick={handleClick}>点击</button>;
};