React Hooks 系列 - useMemo：巧用闭包优化组件渲染性能

2023-10-03 04:35:19

揭秘 useMemo 的工作原理

useMemo 钩子接受两个参数：一个函数和一个依赖项数组。当组件首次渲染时，useMemo 会调用该函数并存储其结果。在随后的渲染中，useMemo 会检查依赖项数组是否发生了变化。如果依赖项没有变化，useMemo 将返回之前存储的结果，从而避免了不必要的函数调用。只有当依赖项发生变化时，useMemo 才会再次调用该函数并更新其结果。

巧妙利用 useMemo 优化组件性能

useMemo 非常适合优化那些在组件每次渲染时都会执行昂贵的计算的场景。例如，如果你有一个包含大量数据的列表，并且你希望在每次渲染时对这些数据进行排序，那么你可以使用 useMemo 来记住排序后的结果，从而避免每次渲染时都重新排序数据。

以下是一个示例，展示了如何使用 useMemo 来优化组件性能：

import React, { useState, useMemo } from "react";

const MyComponent = () => {
  const [data, setData] = useState([]);

  const sortedData = useMemo(() => {
    return data.sort((a, b) => a - b);
  }, [data]);

  return (
    <ul>
      {sortedData.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

在这个示例中，我们使用 useMemo 来记住排序后的数据，从而避免每次组件渲染时都重新排序数据。这可以显著提高组件的性能，尤其是在数据量较大的情况下。

携手 React.memo 与 useCallback 优化组件渲染

除了 useMemo 之外，React 还提供了另一个优化组件渲染的利器——React.memo。React.memo 是一个高阶组件，它可以根据组件的 props 是否发生变化来决定是否重新渲染组件。这对于那些纯函数组件非常有用，因为纯函数组件在 props 没有发生变化时总是会返回相同的结果。

以下是一个示例，展示了如何使用 React.memo 来优化组件性能：

import React, { memo } from "react";

const MyPureComponent = memo(({ data }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
});

export default MyPureComponent;

在这个示例中，我们使用 React.memo 来包装纯函数组件 MyPureComponent。这将确保组件只会在 props 发生变化时才重新渲染，从而提高组件的性能。

useCallback 钩子可以用来优化那些需要在组件每次渲染时都创建的函数。useCallback 会记住一个函数，并在函数的依赖项发生改变时才重新创建它。这对于那些需要在组件每次渲染时都创建昂贵的函数的场景非常有用。

以下是一个示例，展示了如何使用 useCallback 来优化组件性能：

import React, { useState, useCallback } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
};

export default MyComponent;