第28节——useCallback

一、概念

React 的 useCallback 是一个 Hook，用于优化性能，在组件的更新过程中避免不必要的函数重新定义。

在 React 中，当组件重新渲染时，它会重新声明所有的函数，因此在频繁更新的组件中使用多个函数会导致不必要的性能开销。useCallback 可以解决这个问题，它接受两个参数：一个回调函数和一个依赖项列表。当依赖项列表中的任意一项改变时，useCallback 会重新定义回调函数，否则它会返回一个缓存的函数引用，从而避免不必要的函数重新定义。

使用 useCallback 可以显著提高组件的性能，特别是在处理高频率的更新或大量的交互操作时。但是，请注意，如果使用不当，它也可能导致代码变得难以理解和维护。因此，在使用 useCallback 时，需要谨慎考虑其影响，并确保代码可读性和可维护性

二、配合react.memo使用

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

// react.memo会做一层浅比较

/**
 * 因为我们每次触发render 都会重新执行一遍当前函数
 * 所以说，我们的方法会重新赋值，react.memo时进行浅比较
 * 重新赋值的方法和之前的方法，引用不一样，所以react.memo
 * 会认为是一个新的对象，所以会重新渲染
 */
const ChildComponent = React.memo((props) => {
  console.log("每次render都会触发吗？", props);
  return (
    

      
你好我是子组件
    
  );
});

export default function LearnUseCallBack() {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(1);

  /**
   * useCallback 第一个参数是一个函数
   * 第二个参数是依赖项
   * 依赖项不变的情况下，函数的引用不变
   * 依赖项传空数组，那么函数会一直不变
   * 如果什么都不穿，那么会失效
   *
   * 引用地址变了后，函数不会调用，他只负责引用地址
   */
  const add = useCallback(() => {
    console.log("你好");
    setNum(num + 1);
  }, [count]);

  return (
    

      
缓存函数
      num + 1
       setCount(count + 1)}>count + 1
      num ==> {num}
      count ==> {count}
      
    
  );
}
import React, { useState, useCallback } from "react";

// react.memo会做一层浅比较

/**
 * 因为我们每次触发render 都会重新执行一遍当前函数
 * 所以说，我们的方法会重新赋值，react.memo时进行浅比较
 * 重新赋值的方法和之前的方法，引用不一样，所以react.memo
 * 会认为是一个新的对象，所以会重新渲染
 */
const ChildComponent = React.memo((props) => {
  console.log("每次render都会触发", props);
  return (
    

      
你好我是子组件
    
  );
});

export default function LearnUseCallBack() {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(1);

  /**
   * useCallback 第一个参数是一个函数
   * 第二个参数是依赖项
   * 依赖项不变的情况下，函数的引用不变
   * 依赖项传空数组，那么函数会一直不变
   * 如果什么都不穿，那么会失效
   *
   * 引用地址变了后，函数不会调用，他只负责引用地址
   */
  const add = useCallback(() => {
    console.log("你好");
    setNum(num + 1);
  }, [count]);

  return (
    

      
缓存函数
      num + 1
       setCount(count + 1)}>count + 1
      num ==> {num}
      count ==> {count}
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

三、使用场景

1、优化子组件性能

如果在父组件的渲染过程中，子组件因为某个函数的变化而重新渲染，那么使用 useCallback 可以避免不必要的子组件重新渲染。

2、避免循环引用

如果在回调函数内部引用了组件的状态或者组件自身，那么它可能会形成循环引用，使用 useCallback 可以避免这个问题。

3、提高性能

如果某个回调函数的值变化频率很低，那么使用 useCallback 可以避免这个函数的重复定义，提高组件的性能

四、useCallback 和 useMemo的区别（重要🚀）

1、目的不同

useMemo 是用于缓存计算结果，useCallback 是用于缓存函数引用。

2、使用方法不同

useMemo 用于缓存计算结果，并在其依赖项发生变化时进行重新计算；而 useCallback 只是在依赖项发生变化时重新生成一个新的回调函数。

3、返回值不同

useMemo 返回缓存的计算结果，useCallback 返回一个缓存的回调函数

4、总结

总的来说，useMemo 适用于需要缓存计算结果的场景，useCallback 适用于缓存回调函数的场景。