提升 React 性能：useCallback 与 useMemo Hooks

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

何时使用 useCallback

useCallback 挂钩返回回调函数的记忆版本，这意味着它仅在其依赖项之一发生更改时重新创建该函数。当将函数作为 props 传递给子组件以防止它们不必要地重新渲染时，这特别有用。

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

假设您有一个将函数传递给子组件的父组件。如果没有 useCallback，每次父组件渲染时，子组件都会重新渲染，即使函数逻辑没有改变。

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

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

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
    
  );
};

export default ParentComponent;

在上面的例子中，handleIncrement是通过useCallback来记忆的。 ChildComponent 仅在计数更改时才会重新渲染，防止不必要的重新渲染并提高性能。

何时使用 useMemo

useMemo 钩子用于记忆函数的结果，仅当其依赖项之一发生更改时才重新计算缓存的结果。在函数执行昂贵计算的情况下，它对于优化性能很有用。

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

假设您有一个组件执行计算量大的操作，例如过滤大列表。

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

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

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
    
  );
};

export default ExpensiveComponent;

本例中使用useMemo来缓存items数组的过滤结果。这样，昂贵的过滤操作仅在项目或过滤器发生变化时才重新计算，避免了不必要的计算。

useCallback 和 useMemo 使用指南

• 将函数传递给子组件时使用 useCallback 以避免不必要的重新渲染。
• 使用 useMemo 进行昂贵的计算，不需要在每次渲染时重新计算。
• 避免过度使用它们。 记忆化会增加复杂性，有时会使代码更难阅读。仅当您发现性能问题时才使用它们。
• 记住依赖关系数组。 始终准确地指定依赖关系；否则，您可能会遇到错误或意外行为。

结论

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