【useCallback Hook】在多次渲染中缓存组件中的函数，避免重复创建函数

news2025/1/25 3:42:16

文章目录

- 什么是 useCallback？
- - 基本语法
- 为什么需要 useCallback？
- 示例
- - 1. 避免子组件重复创建函数
  - 2. 作为 useEffect 的依赖项
- 注意事项
- 总结

在 React 开发中，性能优化是一个重要的主题。随着应用规模的增长，组件的重新渲染可能会变得频繁，从而影响应用的性能。useCallback 是 React 提供的一个 Hook，用于返回一个记忆化的回调函数。它可以帮助我们在依赖项没有变化的情况下，避免函数的重新创建，从而减少不必要的子组件重新渲染。本文将详细介绍 useCallback 的工作原理、使用场景以及如何正确使用它。

什么是 useCallback？

useCallback 是 React 提供的一个 Hook，用于返回一个记忆化的回调函数。它可以帮助我们在依赖项没有变化的情况下，避免函数的重新创建，从而减少不必要的子组件重新渲染。

基本语法

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

回调函数：第一个参数是要记忆化的函数。
依赖项数组：第二个参数是一个数组，包含所有在回调函数中使用的外部变量。只有当这些变量发生变化时，useCallback 才会返回一个新的函数。

为什么需要 useCallback？

在 React 中，每当父组件重新渲染时，子组件也会重新渲染，即使子组件的 props 没有变化。这是因为每次父组件重新渲染时，都会创建新的函数实例。如果子组件依赖于这些函数，即使这些函数的逻辑没有变化，子组件也会认为 props 发生了变化，从而重新渲染。

示例

1. 避免子组件重复创建函数

// Parent.tsx
import React, { useState, useCallback } from "react";
import Child from './Child';

const Child = React.memo(({ onClick }) => {
  console.log("Child component rendered");
  return <button onClick={onClick}>Click me</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  // 使用 useCallback 缓存回调函数
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []); // 空依赖项数组表示回调函数不会变化

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

export default Parent;

解释:

Child 组件使用了 React.memo，只有当它的 props 发生变化时才会重新渲染。
handleClick 通过 useCallback 缓存，因此即使 Parent 组件重新渲染，Child 也不会因为 onClick 的变化而重新渲染。

2. 作为 useEffect 的依赖项

// App.tsx
import { useState, useEffect, useCallback } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [page, setPage] = useState(1)

  // 使用 useCallback 缓存回调函数
  const fetchData = useCallback(() => {
    console.log("Fetching data...");
  }, [page]); // page 变化时重新创建回调函数

  useEffect(() => {
    console.log("useEffect called")
    fetchData();
  }, [fetchData]); // 将 fetchData 作为依赖项

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setPage(page + 1)}>page + 1</button>
    </div>
  );
}

export default App;

解释:

fetchData 通过 useCallback 缓存，因此即使组件重新渲染，useEffect 也不会因为 fetchData 的变化而重新执行。

注意事项

不要滥用 useCallback:
- 如果函数非常简单，或者不需要传递给子组件，使用 useCallback 可能会增加额外的开销，反而降低性能。
- 只有在确实需要缓存函数时才使用 useCallback。
依赖项数组:
- 确保依赖项数组包含所有在回调函数中使用的外部变量，否则可能会导致闭包问题（例如使用过期的状态或 props）。
与 React.memo 结合使用:
- useCallback 通常与 React.memo 一起使用，以避免子组件的不必要渲染。