React 中的 memo、useMemo 和 useCallback：理解并恰当地使用它们

2023-11-03 07:15:12

提升 React 应用性能的利器：memo、useMemo 和 useCallback

在当今快节奏的数字世界中，网站和应用程序的性能至关重要。用户期望网站和应用程序快速加载、响应迅速且流畅运行。作为一名 React 开发人员，了解如何优化应用程序的性能至关重要。

React 提供了一系列工具来帮助提高应用程序的性能，其中包括三个极其有用的工具：memo、useMemo 和 useCallback。它们共同为组件重新渲染带来的性能影响提供了一套全面的解决方案。

memo：优化函数式组件

想象一下这样一个场景：你有一个函数式组件，它包含了一个庞大且昂贵的计算。每次组件的 prop 发生变化时，该计算都会重新执行。这对应用程序的性能造成了不必要的负担。

这里 memo 就派上用场了。memo 是一种高阶组件，它通过比较组件的 prop 来决定是否需要重新渲染。如果 prop 没有改变，则组件不会重新渲染。这可以显著减少不必要的重新渲染，从而提高应用程序的性能。

import React, { memo } from "react";

const MyComponent = memo(({ name }) => {
  // 昂贵的计算
  const expensiveComputation = computeSomething();

  return <h1>{name}</h1>;
});

useMemo：缓存昂贵的函数调用

useMemo 是一种 React Hook，它允许你在函数组件中缓存昂贵的函数调用。这对于防止在每次组件重新渲染时重新执行昂贵的函数非常有用。

import React, { useMemo } from "react";

const MyComponent = () => {
  // 昂贵的函数调用
  const expensiveComputation = useMemo(() => computeSomething(), []);

  return <h1>{expensiveComputation}</h1>;
};

useCallback：缓存回调函数

useCallback 是一种 React Hook，它允许你在函数组件中缓存回调函数。这对于防止在每次组件重新渲染时重新创建回调函数非常有用。

import React, { useCallback } from "react";

const MyComponent = () => {
  // 回调函数
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, []);

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