React Hooks小记（十）_useCallback

useCallback

1. 语法格式

之前我们所学的 useMemo 能够达到缓存某个变量值的效果，而当前要学习的 useCallback 用来对组件内的函数进行缓存，它返回的是缓存的函数。它的语法格式如下：

const memoCallback = useCallback(cb, array)

useCallback 会返回一个 memorized 回调函数供组件使用，从而防止组件每次 rerender 时反复创建相同的函数，能够节省内存开销，提高性能。其中：

1. cb 是一个函数，用于处理业务逻辑，这个 cb 就是需要被缓存的函数

2. array 是依赖项列表，当 array 中的依赖项变化时才会重新执行 useCallback。

a. 如果省略 array，则每次更新都会重新计算

b. 如果 array 为空数组，则只会在组件第一次初始化的时候计算一次

c. 如果 array 不为空数组，则只有当依赖项的值变化时，才会重新计算

2. 基本示例

接下来，我们通过下面的例子演示使用 useCallback 的必要性：当输入框触发 onChange 事件时，会给 kw 重新赋值。

kw 值的改变会导致组件的 rerender，而组件的 rerender 会导致反复创建 onKwChange 函数并添加到 Set 集合中，造成了不必要的内存浪费。代码如下：

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

// 用来存储函数的 set 集合
const set = new Set()

export const Search: React.FC = () => {
   
   
  const [kw, setKw] = useState('')

  const onKwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   
   
    setKw(e.currentTarget.value)
  }

  // 把 onKwChange 函数的引用，存储到 set 集合中
  set.add(onKwChange)
  // 打印 set 集合中元素的数量
  console.log('set 中函数的数量为：' + set.size)

  return (
    <>
      <input type="text" value={
   
   kw} onChange={
   
   onKwChange} />
      <hr />
      <p>{
   
   kw}