彻底理解useMemo和useCallback的使用场景

2024-02-13 17:29:35

useMemo

useMemo函数可以让你在函数组件中记住一个计算结果，在组件重新渲染时，如果计算结果没有发生变化，则不会重新计算，从而提高了性能。

使用场景

当你在函数组件中有一个昂贵的计算，并且这个计算结果不会在组件重新渲染时发生变化时，你可以使用useMemo来记住这个计算结果。
当你在函数组件中使用了一个回调函数，并且这个回调函数在组件重新渲染时不会发生变化时，你可以使用useMemo来记住这个回调函数。

代码示例

import React, { useMemo } from "react";

const MyComponent = () => {
  // 昂贵的计算
  const expensiveComputation = useMemo(() => {
    // 昂贵的计算逻辑
    return 42;
  }, []);

  // 回调函数
  const handleClick = useMemo(() => {
    // 回调函数逻辑
    console.log("Button clicked!");
  }, []);

  return (
    <div>
      <p>Expensive computation: {expensiveComputation}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
};

export default MyComponent;

useCallback

useCallback函数可以让你在函数组件中记住一个回调函数，在组件重新渲染时，如果回调函数没有发生变化，则不会重新创建，从而提高了性能。

使用场景

当你在函数组件中有一个回调函数，并且这个回调函数在组件重新渲染时不会发生变化时，你可以使用useCallback来记住这个回调函数。
当你在函数组件中使用了一个子组件，并且这个子组件的props在组件重新渲染时不会发生变化时，你可以使用useCallback来记住这个子组件的props。

代码示例

import React, { useCallback } from "react";

const MyComponent = () => {
  // 回调函数
  const handleClick = useCallback(() => {
    // 回调函数逻辑
    console.log("Button clicked!");
  }, []);

  // 子组件
  const ChildComponent = ({ prop1, prop2 }) => {
    return (
      <div>
        <p>Prop 1: {prop1}</p>
        <p>Prop 2: {prop2}</p>
      </div>
    );
  };

  // 使用useCallback来记住子组件的props
  const memoizedChildComponentProps = useCallback({ prop1: "value1", prop2: "value2" }, []);

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <ChildComponent {...memoizedChildComponentProps} />
    </div>
  );
};

export default MyComponent;