Day9:浅谈useCallback

「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。

Day9-今日话题

提到react项目中的性能优化，我们马上就能想到两个钩子：useMemo、useCallback。前一期文章已经简单聊过useMemo了，今天我们将从「用法」、「工作原理」、「作用」、「优缺点」、「使用场景」、「使用注意点」这六个角度来介绍useCallback

用法

useCallback 用于缓存一个函数，以便在组件重新渲染时避免不必要的函数创建和内存分配。它的基本用法如下：

const memoizedCallback = useCallback(
  () => {
    // 函数体
  },
  [dependencies]
);

useCallback 接受两个参数，第一个参数是要缓存的函数，第二个参数是一个依赖数组，只有当依赖数组中的值发生变化时，才会重新创建函数。如果依赖数组为空，函数将永远不会重新创建。

工作原理

useCallback 使用了 memoization 技术，它会在每次渲染时比较依赖数组中的值是否发生了变化。如果依赖数组中的值没有变化，它会返回上一次创建的函数引用，否则会创建一个新的函数。

作用

• 「性能优化」：避免不必要的函数重新创建，减少内存分配和提高组件性能。
• 「确保子组件的稳定性」：当将函数作为 prop 传递给子组件时，使用 useCallback 可以确保子组件不会因为父组件的重新渲染而重新渲染，除非依赖数组中的值发生变化。

优缺点

「优点」：

• 提高性能：避免不必要的函数创建，特别在高频重新渲染的情况下可以显著提高性能。
• 保持稳定性：确保传递给子组件的函数不会随着父组件的重新渲染而改变，有助于避免不必要的子组件渲染。

「缺点」：

• 使用不当可能导致性能问题：如果依赖数组中的值过于频繁地变化，可能会导致函数频繁地重新创建，反而降低性能。

「使用场景」：

以下是一些常见的使用场景：

1. 「传递回调函数给子组件」：

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

function ParentComponent() {
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, []);

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

在这个场景中，我们使用 useCallback 来确保 handleClick 函数不会因为 ParentComponent 的重新渲染而重新创建。这有助于优化 ChildComponent 的性能，因为它的 onClick 属性不会频繁地改变。

2. 「在依赖数组中使用函数」：

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

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

  const increment = useCallback(() => {
    setCount(count + 1); // 使用 count 作为依赖
  }, [count]);

  return (
    <div>
      <p>Count: {count}p>
      <button onClick={increment}>Incrementbutton>
    div>
  );
}

在这里，我们使用 useCallback 来确保 increment 函数只有在 count 改变时才重新创建。这样可以避免因为 increment 的重新创建而导致不必要的重新渲染。

3. 「自定义 Hook 中的使用」：

import { useState, useCallback } from 'react';

function useToggle(initialState) {
  const [value, setValue] = useState(initialState);

  const toggle = useCallback(() => {
    setValue((prevValue) => !prevValue);
  }, []);

  return [value, toggle];
}

在自定义 Hook 中，我们使用 useCallback 来确保 toggle 函数在不同组件中使用时都具有相同的引用，并且不会因为组件重新渲染而改变。

4. 「优化大型列表或表格」：

当你在渲染大型列表或表格时，可以使用 useCallback 来缓存行级别的事件处理函数，以减少不必要的函数创建。这可以显著提高性能，特别是在虚拟化列表等场景中。

使用注意点

• 不要滥用 useCallback。只有当性能问题明显时，或者需要确保回调函数的稳定性时才使用它。
• 注意依赖数组的配置。确保依赖数组中的值是唯一标识函数是否需要重新创建的关键因素。
• 将 useCallback 用于传递给 DOM 事件处理程序时要小心，因为它可能导致事件处理程序不更新。

总之，useCallback 是 React 中用于性能优化的有效工具，可以帮助你避免不必要的函数创建和确保回调函数的稳定性。但要谨慎使用，仅在需要时使用，以免引入不必要的复杂性。

---

欢迎点赞、关注、转发～

本文由 mdnice 多平台发布