WHAT - React 函数与 useMemo vs useCallback

一、介绍

在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。

useMemo 与 useCallback 的区别

1. useMemo:

   • 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时，计算函数才会重新执行。
   • 用法: 当你需要避免在每次渲染时重复计算一个值时使用。比如，当计算一个复杂的值（如列表过滤、排序）时，可以使用 useMemo 来缓存计算结果，避免不必要的重新计算。
   • 语法:

     const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
     

2. useCallback:

   • 目的: 用于记忆化（缓存）函数。它接受一个函数和依赖项数组，只有当依赖项发生变化时，函数才会重新创建。
   • 用法: 当你需要避免在每次渲染时重新创建一个函数，尤其是当函数作为 props 传递给子组件时，使用 useCallback 可以确保子组件不因函数的重新创建而重新渲染。
   • 语法:

     const memoizedCallback = useCallback(() => {
       // Your callback logic
     }, [dependencies]);
     

示例代码

useMemo 示例

假设你有一个计算密集型的函数 computeExpensiveValue，它依赖于 a 和 b。

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

const ExpensiveComponent = ({ a, b }) => {
    // 使用 useMemo 缓存计算结果
    const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

    return <div>{result}</div>;
};

function computeExpensiveValue(a, b) {
    // 假设这个函数很复杂
    console.log('Computing expensive value...');
    return a + b;
}

在这个示例中，computeExpensiveValue 只会在 a 或 b 改变时重新计算，否则会返回缓存的结果。

useCallback 示例

假设你有一个处理点击事件的函数 handleClick，它被传递给子组件 ButtonComponent。

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

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

    // 使用 useCallback 缓存函数
    const handleClick = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return <ButtonComponent onClick={handleClick} />;
};

const ButtonComponent = ({ onClick }) => {
    console.log('ButtonComponent rendered');
    return <button onClick={onClick}>Click me</button>;
};

在这个示例中，handleClick 只会在 count 改变时重新创建，从而避免不必要的子组件重新渲染。

总结

• useMemo: 用于缓存计算结果。适用于复杂计算、渲染时计算。
• useCallback: 用于缓存函数。适用于避免函数重新创建，尤其是当函数作为 props 传递给子组件时。

选择使用 useMemo 还是 useCallback 取决于你的具体需求。如果你需要记忆化计算结果，使用 useMemo；如果你需要记忆化函数，使用 useCallback。通常，它们可以结合使用，以优化性能和避免不必要的渲染或计算。

二、当一个函数被作为依赖项

当你有一个函数被用作依赖项时，是否应该使用 useMemo 还是 useCallback 来封装它，取决于你的具体情况。下面是关于这两种钩子的详细指南，以帮助你做出决定：

useMemo 和 useCallback 的适用情况

1. useCallback:

   • 用途: 用于缓存函数的实例。它创建一个稳定的函数引用，只有当其依赖项发生变化时，才会重新创建该函数。

   • 使用场景:

     • 当你需要将函数传递给子组件作为 props，以避免子组件因为函数引用变化而重新渲染。
     • 当你需要确保函数在依赖项变化时保持稳定。

   • 示例:

     import React, { useCallback, useState } from 'react';
     
     const ParentComponent = () => {
         const [count, setCount] = useState(0);
     
         // 使用 useCallback 缓存函数
         const handleClick = useCallback(() => {
             setCount(count + 1);
         }, [count]); // 依赖项为 count
     
         return <ChildComponent onClick={handleClick} />;
     };
     
     const ChildComponent = ({ onClick }) => {
         console.log('ChildComponent rendered');
         return <button onClick={onClick}>Click me</button>;
     };
     

2. useMemo:

   • 用途: 用于缓存计算结果。它记忆化计算结果，只有在依赖项发生变化时，才会重新计算。

   • 使用场景:

     • 当你有一个计算密集型的操作，且希望避免每次渲染都进行重复计算。
     • 当你需要缓存某个值而不是函数，以减少计算量。

   • 示例:

     import React, { useMemo, useState } from 'react';
     
     const ParentComponent = ({ items }) => {
         // 使用 useMemo 缓存计算结果
         const sortedItems = useMemo(() => {
             return [...items].sort(); // 假设这是一个耗时的排序操作
         }, [items]); // 依赖项为 items
     
         return <ChildComponent items={sortedItems} />;
     };
     
     const ChildComponent = ({ items }) => {
         return (
             <ul>
                 {items.map((item, index) => (
                     <li key={index}>{item}</li>
                 ))}
             </ul>
         );
     };
     

选择使用 useCallback 或 useMemo

• 函数作为依赖项: 如果你有一个函数作为依赖项，并且你希望这个函数的引用在组件的生命周期中保持稳定，使用 useCallback 是合适的。例如，如果你将这个函数作为 props 传递给子组件，useCallback 可以确保子组件不会因为函数引用的变化而重新渲染。

• 计算结果作为依赖项: 如果你希望缓存一个值的计算结果，而这个值的计算依赖于某些状态或属性，使用 useMemo 是合适的。例如，如果你有一个计算密集型的值需要在依赖项变化时重新计算，但希望在依赖项没有变化时返回缓存的结果。

总结

• 使用 useCallback: 当你需要稳定的函数引用，尤其是当这个函数作为依赖项或传递给子组件时。
• 使用 useMemo: 当你需要缓存计算结果，以避免重复的计算操作。

实际例子

假设你有一个函数 fetchData 被用作依赖项，在 useEffect 中：

import React, { useEffect, useCallback } from 'react';

const MyComponent = ({ fetchData }) => {
    // 假设你在 useEffect 中使用 fetchData
    useEffect(() => {
        fetchData(); // 只在 fetchData 变化时调用
    }, [fetchData]);

    // 使用 useCallback 缓存 fetchData（如果需要稳定性）
    const memoizedFetchData = useCallback(fetchData, [fetchData]);

    return <div>Content</div>;
};

export default MyComponent;

在这个例子中，useCallback 用于确保 fetchData 函数的稳定引用。如果 fetchData 是从 props 中传递进来的，你可以使用 useCallback 来缓存它的引用。

总的来说，选择 useMemo 还是 useCallback 取决于你是否在意函数的稳定性还是计算结果的稳定性。