如何在 React 中使用useCallback Hook 优化列表项点击事件的性能，避免父组件重新渲染导致的不必要触发？-CSDN博客

本文链接：https://blog.csdn.net/qq_37212162/article/details/147703552

大白话如何在 React 中使用useCallback Hook 优化列表项点击事件的性能，避免父组件重新渲染导致的不必要触发？

问题场景

前端开发的宝子们，咱在使用 React 开发项目的时候，是不是经常会遇到列表渲染的情况？比如说，做一个电商应用，要展示商品列表；做一个社交应用，要展示好友列表。这时候，每个列表项往往都会有一些交互事件，像点击事件啥的。

假如有一个父组件，它里面渲染了一个列表，每个列表项都有一个点击事件处理函数。当父组件因为某些原因重新渲染的时候，这些点击事件处理函数就会被重新创建。可这就有问题了，重新创建函数会带来不必要的性能开销，而且如果这些函数作为 props 传递给子组件，还会导致子组件也跟着重新渲染，就算子组件的内容根本没变化。

就好比你去超市买东西，每次结账的时候，收银员都要重新认识你一遍，哪怕你天天去，买的东西也都差不多。这多浪费时间和精力啊，在代码里也是一样，浪费性能。

技术原理

要理解 useCallback 是怎么解决这个问题的，咱得先搞清楚 React 的渲染机制和函数引用的概念。

在 React 里，每次组件重新渲染，组件内部的函数都会被重新创建。这就意味着，即使函数的代码没有变化，它的引用也会变。而子组件接收到新的函数引用后，会认为 props 有变化，从而触发重新渲染。

useCallback 是 React 提供的一个 Hook，它的作用就是缓存函数。它接收两个参数，第一个参数是要缓存的函数，第二个参数是一个依赖数组。只有当依赖数组里的值发生变化时，useCallback 才会返回一个新的函数引用，否则就会返回之前缓存的函数引用。

这就好比超市给你办了一张会员卡，收银员只要看一眼会员卡，就知道你是谁了，不用每次都重新认识你。在代码里，useCallback 就相当于这张会员卡，让函数的引用保持不变，避免不必要的重新渲染。

代码示例

下面咱来看一个具体的代码示例，看看怎么用 useCallback 优化列表项的点击事件。

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

// 定义一个子组件，用于渲染列表项
const ListItem = ({ item, onClick }) => {
  // 这里打印日志，方便我们观察组件是否重新渲染
  console.log('ListItem rendered:', item.id);
  return (
    <li onClick={onClick}>
      {item.name}
    </li>
  );
};

// 定义父组件
const ParentComponent = () => {
  // 使用 useState 来管理一个列表数据
  const [list, setList] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);

  // 使用 useState 来管理一个计数器，用于模拟父组件的重新渲染
  const [counter, setCounter] = useState(0);

  // 定义一个普通的点击事件处理函数
  const handleClickWithoutCallback = (item) => {
    console.log('Clicked:', item.name);
  };

  // 使用 useCallback 来缓存点击事件处理函数
  const handleClickWithCallback = useCallback((item) => {
    console.log('Clicked:', item.name);
  }, []);

  // 定义一个函数，用于增加计数器的值，触发父组件的重新渲染
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment Counter</button>
      <h2>List without useCallback</h2>
      <ul>
        {list.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onClick={() => handleClickWithoutCallback(item)}
          />
        ))}
      </ul>
      <h2>List with useCallback</h2>
      <ul>
        {list.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onClick={() => handleClickWithCallback(item)}
          />
        ))}
      </ul>
    </div>
  );
};

export default ParentComponent;

代码解释

ListItem 组件：这是一个子组件，用于渲染列表项。它接收两个 props，item 表示列表项的数据，onClick 表示点击事件处理函数。
ParentComponent 组件：这是父组件，它做了几件事：
- 使用 useState 管理列表数据和一个计数器。
- 定义了两个点击事件处理函数，一个是普通的函数 handleClickWithoutCallback，另一个是使用 useCallback 缓存的函数 handleClickWithCallback。
- 定义了一个 incrementCounter 函数，用于增加计数器的值，从而触发父组件的重新渲染。
- 在渲染列表时，分别使用这两个点击事件处理函数。

对比效果

情况	父组件重新渲染时函数是否重新创建	子组件是否重新渲染	性能影响
不使用 `useCallback`	是	是	高，因为函数重新创建，子组件也会重新渲染
使用 `useCallback`	否	否	低，函数引用保持不变，子组件不会重新渲染

从这个表格可以清楚地看到，使用 useCallback 可以避免函数的重新创建和子组件的不必要重新渲染，从而提高性能。

面试大白话回答方法

如果面试的时候被问到这个问题，你可以这么回答：

“面试官您好，在 React 里，当父组件重新渲染时，里面的函数会重新创建。要是这些函数作为 props 传给子组件，子组件就会以为 props 变了，然后也重新渲染，哪怕内容没改，这就浪费性能了。

useCallback 就是用来解决这个问题的。它就像一个缓存，能把函数存起来。我给它传两个参数，第一个是要缓存的函数，第二个是依赖数组。只有依赖数组里的值变了，它才会返回新的函数引用，不然就返回之前缓存的。

比如说，有个父组件渲染列表，每个列表项有点击事件。不用 useCallback 时，父组件重新渲染，点击事件函数就重新创建，子组件也跟着重新渲染。用了 useCallback 后，函数引用不变，子组件就不会因为这个重新渲染，性能就提高了。”

总结

useCallback 是 React 里一个非常实用的 Hook，它能帮助我们优化列表项点击事件的性能，避免父组件重新渲染导致的不必要触发。通过缓存函数，保持函数引用的稳定，我们可以减少子组件的重新渲染，从而提高应用的性能。

在实际开发中，当你遇到列表渲染，并且每个列表项有交互事件时，不妨考虑使用 useCallback 来优化性能。但也要注意，不要滥用 useCallback，只有在确实需要缓存函数的情况下才使用，不然可能会增加代码的复杂度。

扩展思考

依赖数组的作用：依赖数组里的值决定了 useCallback 什么时候返回新的函数引用。如果依赖数组为空，那么函数只会在组件挂载时创建一次，之后就一直使用缓存的函数。如果依赖数组里有值，那么当这些值发生变化时，useCallback 会返回一个新的函数引用。
与 useMemo 的区别：useCallback 缓存的是函数，而 useMemo 缓存的是函数的返回值。如果需要缓存一个计算结果，可以使用 useMemo；如果需要缓存一个函数，可以使用 useCallback。
在复杂场景下的应用：在一些复杂的场景中，比如列表项的点击事件需要访问父组件的状态，或者需要调用其他函数，这时候要合理设置依赖数组，确保 useCallback 能正确工作。

4. 与 React.memo 的搭配使用

在优化列表渲染性能时，useCallback 常常和 React.memo 一起使用。React.memo 是一个高阶组件，它可以用来 memoize 函数式组件。简单来说，当它包裹的子组件的 props 没有变化时，子组件不会重新渲染。

结合 useCallback，我们可以更好地控制子组件的重新渲染。比如在前面的例子中，我们可以给 ListItem 组件加上 React.memo：

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

// 使用 React.memo 包裹 ListItem 组件
const ListItem = memo(({ item, onClick }) => {
  console.log('ListItem rendered:', item.id);
  return (
    <li onClick={onClick}>
      {item.name}
    </li>
  );
});

const ParentComponent = () => {
  const [list, setList] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);
  const [counter, setCounter] = useState(0);

  const handleClickWithoutCallback = (item) => {
    console.log('Clicked:', item.name);
  };

  const handleClickWithCallback = useCallback((item) => {
    console.log('Clicked:', item.name);
  }, []);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment Counter</button>
      <h2>List without useCallback</h2>
      <ul>
        {list.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onClick={() => handleClickWithoutCallback(item)}
          />
        ))}
      </ul>
      <h2>List with useCallback</h2>
      <ul>
        {list.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onClick={() => handleClickWithCallback(item)}
          />
        ))}
      </ul>
    </div>
  );
};

export default ParentComponent;

这样一来，只有当 ListItem 组件的 item 或 onClick 这两个 props 真正发生变化时，它才会重新渲染。即使父组件因为其他无关状态的改变而重新渲染，只要 ListItem 的 props 不变，它也不会重新渲染，进一步提升了性能。

5. 常见错误与避坑指南

依赖数组遗漏：在设置 useCallback 的依赖数组时，如果遗漏了必要的依赖项，可能会导致函数使用到的某些变量是旧值。比如：

const ParentComponent = () => {
  const [message, setMessage] = useState('Hello');
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log(message, count); // 这里可能会打印出旧的 message 和 count 值
  }, []);

  return (
    <div>
      <button onClick={() => setMessage('World')}>Change Message</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

正确的做法是将 message 和 count 都加入依赖数组：

const handleClick = useCallback(() => {
  console.log(message, count);
}, [message, count]);

过度使用：虽然 useCallback 能优化性能，但如果在不必要的地方滥用，会让代码变得难以理解和维护。比如一些简单的、不会传递给子组件的函数，就没必要使用 useCallback 来缓存。

6. 实际项目中的应用场景拓展

除了列表项点击事件，useCallback 在很多其他场景也能派上用场。例如在表单输入的实时验证中，当验证函数作为 props 传递给输入框组件时，使用 useCallback 可以避免验证函数因父组件的无关渲染而重新创建。

再比如在一个具有复杂交互逻辑的图表组件中，各种事件处理函数（如点击图表元素、拖拽等）通过 useCallback 进行缓存，能有效提升图表交互的流畅度，减少不必要的性能损耗。

前端开发中，性能优化是一个永无止境的话题。useCallback 只是众多优化手段中的一种，但只要我们掌握好它的使用方法，就能在项目中发挥出巨大的作用，让我们的 React 应用更加丝滑流畅，在激烈的技术竞争中脱颖而出！如果你在实际使用 useCallback 的过程中遇到了什么有趣的问题，或者有更好的优化经验，欢迎在评论区分享交流，咱们一起把前端开发玩得更溜！