当前位置：首页 > article >正文

react hooks--useCallback

article 2024/9/24 18:37:14

概述

useCallback缓存的是一个函数，主要用于性能优化!!!

基本用法

如何进行性能的优化呢？

useCallback会返回一个函数的 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

语法：

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

通常使用useCallback的目的是不希望子组件进行多次渲染，并不是为了函数进行缓存；
在使用 React.memo 时，对于对象类型的 props，只会比较引用（浅对比）。
但是，因为组件每次更新都会创建新的 props 值，比如，新的对象、事件处理程序等（函数组件的特性）。
这就导致：React.memo 在处理对象类型的 props 时，会失效（每次的 props 都是新对象）。
但是，我们还是想让 React.memo 在处理对象类型的 props 时，也有效。
为了让 React.memo 处理对象类型的 props 有效，只要在组件更新期间保持对象类型引用相等即可

这时候，就要用到以下两个 Hooks：

useCallback Hook：记住函数的引用，在组件每次更新时返回相同引用的函数。
useMemo Hook：记住任意数据（数值、对象、函数等），在组件每次更新时返回相同引用的数据【功能之一】

示例：

import {useCallback, useState} from "react";

export default function UseCallback() {

    let [firstName, setFirstName] = useState('张');
    let [lastName, setLastName] = useState('三');

    let getFullName = useCallback(() => {
        return firstName + lastName
    }, [firstName, lastName])

    return (
        <div>
            姓名：{getFullName()}
        </div>
    )
}

缓存了一个函数，可以在组件中使用!!!

演示示例

使用场景：在使用 React.memo 时，为了组件每次更新时都能获取到相同引用的函数，就要用到 useCallback Hook

注意：需要配合 React.memo 高阶函数一起使用。

作用：记忆传入的回调函数，这个被记住的回调函数会一直生效，直到依赖项发生改变

解释：

第一个参数：必选，需要被记忆的回调函数。
第二个参数：必选，依赖项数组，用于指定回调函数中依赖（用到）的数据（类似于 useEffect 的第二个参数）。
即使没有依赖，也得传入空数组（[]），此时，useCallback 记住的回调函数就会一直生效。
返回值：useCallback 记住的回调函数。
useCallback 记住的回调函数会一直生效（或者说会一直返回同一个回调函数），直到依赖项发生改变。

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

const App = memo(() => {
  const [count, setCount] = useState(0)
  const [money, setMoney] = useState(1000)

  // 初始写法
  const help = useCallback(() => {
    setCount(count - 1)
  }, [count])
  
  // 优化写法：useRef--在组件多次渲染时，返回的是同一个值
  
  // 这种写法容易陷入闭包陷阱
  const help = useCallback(() => {
    setCount(count - 1)
  }, [])
  
  // 推荐优化写法：
  const countRef = useRef();
  countRef.current = count;
  const help = useCallback(() => {
    setCount(countRef.current - 1)
  }, [])
  
  return (
    <div>
      <h1>计数器</h1>
      <div>豆豆被打了{count}次</div>
      <div>金钱：{money}</div>
      <button onClick={() => setCount(count + 1)}>打豆豆</button>
      <button onClick={() => setMoney(money + 100)}>加钱</button>
      <hr />
      {count < 5 ? <DouDou count={count} help={help}></DouDou> : '豆豆被打死了'}
    </div>
  )
})

export default App

Doudou.jsx

// 子组件
const DouDou = memo(({ count, help }) => {
  console.log('豆豆组件渲染')
  return (
    <div>
      <h3>我是豆豆组件{count}</h3>
      <button onClick={help}>续命</button>
    </div>
  )
})
export default Doudou