`useCallback` vs `useMemo` 钩子

React 学习指南

React 的 useCallback 和 useMemo 钩子对于优化应用程序的性能至关重要。理解何时以及如何使用它们可以避免不必要的重新渲染，并确保您的应用程序运行顺畅。在本文中，我们将通过实际示例深入探讨如何有效使用 useCallback 和 useMemo。

何时使用 useCallback

useCallback 钩子返回一个被记忆化的回调函数版本，这意味着它只有在其依赖项之一发生变化时才会重新创建该函数。这在将函数作为属性传递给子组件时特别有用，可以防止子组件不必要的重新渲染。

实时示例：防止不必要的重新渲染

假设你有一个父组件，该父组件向子组件传递一个函数。如果没有使用 useCallback，每当父组件重新渲染时，子组件也会随之重新渲染，即使函数的逻辑没有改变。

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

    const ChildComponent = memo(({ onIncrement }) => {
      console.log('子组件重新渲染');
      return <button onClick={onIncrement}>递增</button>;
    });

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

      const handleIncrement = useCallback(() => {
        setCount(count + 1);
      }, [count]);

      return (
        <div>
          <h1>计数: {count}</h1>
          <ChildComponent onIncrement={handleIncrement} />
        </div>
      );
    };

    export default ParentComponent;

进入全屏模式 退出全屏模式

解释：

• 将子组件备忘化（memo(ChildComponent)）：通过将ChildComponent包裹在memo中，现在它只会在其props发生变化时重新渲染（在这种情况下，当onIncrement发生变化时）。

• useCallback: 这确保了 handleIncrement 函数在每次渲染时不会改变，从而防止子组件因 prop 变化而不必要的重新渲染。

何时使用 useMemo

useMemo 钩子用于缓存函数的结果，只有当其依赖项之一发生变化时，才会重新计算缓存的结果。它在函数执行昂贵计算的情况下优化性能非常有用。

实时示例：优化昂贵的计算

假设你有一个执行计算密集型操作的组件，比如过滤一个大型列表。

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

    const ExpensiveComponent = ({ items }) => {
      const [filter, setFilter] = useState('');

      // 使用 useMemo 优化昂贵的过滤操作
      const filteredItems = useMemo(() => {
        console.log('过滤项目...');
        return items.filter(item => item.includes(filter));
      }, [items, filter]);

      return (
        <div>
          <input
            type="text"
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            placeholder="过滤项目"
          />
          <ul>
            {filteredItems.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      );
    };

    export default ExpensiveComponent;

进入全屏模式 退出全屏模式

在这个例子中，useMemo 用于缓存过滤 items 数组的结果。这样，昂贵的过滤操作只有在 items 或 filter 发生变化时才会重新计算，避免了不必要的计算。

使用 useCallback 和 useMemo 的指南

• 使用useCallback 当将函数传递给子组件时，以避免不必要的重新渲染。
• 使用useMemo 对于那些不需要在每次渲染时都重新计算的昂贵计算。
• 避免过度使用它们。 懒加载会增加复杂性，并且有时会使代码更难阅读。仅在识别出性能问题时使用它们。
• 记住依赖项数组。 总是准确地指定依赖项；否则，你可能会遇到错误或意外行为。

结论

React 的 useCallback 和 useMemo 钩子是通过避免不必要的重新渲染和昂贵的计算来优化组件性能的强大工具。通过谨慎地应用这些钩子，你可以确保你的 React 应用程序运行高效。