React Hooks：何时使用 useMemo/useCallback？

前端

2024-02-07 07:36:04

前言

React Hooks 是 React 16.8 中引入的一组新功能，使函数式组件能够使用 state 和其他 React 特性。

useMemo 和 useCallback 都是 React Hooks，它们可以用来优化组件的性能。

useMemo 可以用来缓存一个值，这样它就不必在每次渲染时重新计算。useCallback 可以用来缓存一个函数，这样它就不必在每次渲染时重新创建。

useMemo

useMemo 接受两个参数：一个函数和一个依赖数组。函数返回一个值，依赖数组是一个值的列表，当这些值改变时，函数将被重新调用。

例如，以下代码使用 useMemo 来缓存一个斐波那契数列的计算结果：

import { useMemo } from "react";

const Fibonacci = ({ n }) => {
  const fibonacci = useMemo(() => {
    let fibSequence = [0, 1];

    for (let i = 2; i <= n; i++) {
      fibSequence.push(fibSequence[i - 1] + fibSequence[i - 2]);
    }

    return fibSequence;
  }, [n]);

  return (
    <div>
      The {n}th Fibonacci number is {fibonacci[n]}.
    </div>
  );
};

这个组件使用 useMemo 来缓存 Fibonacci 数列的计算结果。这意味着，当 n 值改变时，Fibonacci 数列将被重新计算，否则，它将使用缓存的值。

useCallback

useCallback 接受两个参数：一个函数和一个依赖数组。函数返回一个函数，依赖数组是一个值的列表，当这些值改变时，函数将被重新创建。

例如，以下代码使用 useCallback 来缓存一个事件处理函数：

import { useCallback } from "react";

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

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