React 第十六节 useCallback 使用详解注意事项

useCallback 概述

1、useCallback 是在React 中多次渲染缓存函数的 Hook，返回一个函数的 memoized的值；
2、如果多次传入的依赖项不变，那么多次定义的时候，返回的值是相同的,防止频繁触发更新；
3、多应用在 父组件为函数式组件，子组件也为函数式组件，并且子组件被 React.memo() 包裹着；
4、主要用于性能优化，即使不适用useCallback，代码也要能正常运行；

useCallback 基本用法

写法

let memoizedCallback = useCallback(fn, dependencies)

第一个参数：fn 是想要缓存的函数，可以接收任何参数并返回任何值；React 中会在初始化时候调用，而不是渲染时候调用；
当执行下一次渲染时候，如何出入的依赖值 dependencies 相同，则会返回相同的函数 memoizedCallback；
相反 若依赖值 dependencies 不同，则会返回新的函数 memoizedCallback，但是 React 不会主动去调用 memoizedCallback函数，需要开发者自己决定什么时候执行调用函数；

第二个参数：
dependencies：是否要更新 fn 的所有响应式值的一个列表，可以传入空数组:[]；
响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。

useCallback 示例

1、为什么要使用 useCallback

当我们传入相同值的时候，不管是对象类型，还是基本类型，都不希望子组件进行更新渲染；
在不需要大量渲染的时候，性能还可以，但是当数据量大的时候，若相同的数据也触发子组件渲染，则会出现性能问题；

2、在不使用 useCallback() 的时候

每次触发 handleAdd 事件时候，都会渲染子组件 ChildA

//  父组件
import { useCallback,  useState} from 'react'
import ChildA from './childA'
export default function MyCallBack() {const [useInfo, setUseInfo] = useState({name: 'Andy',age: 18})const myCallback = () => {console.log('==useCallback==')return useInfo.name}const handleAdd = () => {setUseInfo({name: 'Andy',age: 18})}return (<div><h3>This is a MyCallBack demo .---{count}</h3><button onClick={handleAdd}>add</button><hr /><ChildA  onAddCount={myCallback} ></ChildA></div>)
}

// 子组件
import React, { memo } from 'react'const  ChildA = memo(({onAddCount}) => {console.log('==ChildA 组件更新了=', count)return (<div><h3>This is a ChildA demo .</h3><button onClick={onAddCount}>子组件</button><hr /></div>)
})

当我们点击 add 按钮时候，发现页面打印 “==ChildA 组件更新了=”，说明传入相同的数据时候，会触发子组件渲染；如图所示

3、使用 useCallback 时候

import { useCallback,useState} from 'react'
import ChildA from './childA'
export default function MyCallBack() {console.log('===父组件callback==')const [count, setCount] = useState(0)const [useInfo, setUseInfo] = useState({name: 'Andy',age: 18})const myCallback = useCallback(() => {console.log('==useCallback==')return useInfo.name}, [useInfo.name])const handleAdd = () => {setUseInfo({name: 'Andy',age: 18})}return (<div><h3>This is a MyCallBack demo .---{count}</h3><button onClick={handleAdd}>add</button><hr /><ChildA  onAddCount={myCallback} ></ChildA></div>)
}

// 子组件
import { memo } from 'react'
// eslint-disable-next-line react/display-name
const  ChildA = memo(({useInfo, count, onAddCount}) => {console.log('==ChildA 组件更新了=', count)const handleChangeName = () =>{setName('Tom')}return (<div><h3>This is a ChildA demo .</h3><h4>{count}</h4><h4>姓名：{useInfo?.name || '--'}</h4><h4>年龄：{useInfo?.age || '--'}</h4><button onClick={onAddCount}>子组件</button><hr /></div>)
})
export default  ChildA 

在点击 add 按钮 更新相同数据时候，只有父组件渲染，子组件不会再渲染；如图：

总结

若要实现 传入相同数据时候，只更新当前组件，而子组件不进行渲染，需使用 useCallback() 和 memo 来处理；