useCallback主要就是對(duì)函數(shù)進(jìn)行緩存,useCallBack這個(gè)Hooks主要是解決React.memo不能緩存事件的問題

useCallBack(fn, dependencies) ：fn想要緩存的函數(shù)，dependencies有關(guān)是否更新 fn 的所有響應(yīng)式值的一個(gè)列表

比如：UseCallBackOptimize組件傳遞了一個(gè)事件函數(shù)給ChildCom2、ChildCom3，只要其中一個(gè)子組件調(diào)用這個(gè)事件就會(huì)影響到另一個(gè)子組件重新渲染一次,React.memo可以解決傳值問題，但解決不了傳遞事件的問題。

示例：

styles.module.css

.container {width: 500px;height: 200px;border: 1px solid;margin: 0 auto;
}.btnContainer {text-align: center;
}.childComContainer {display: flex;justify-content: space-between;
}

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {// 這是UseCallBackOptimize組件自身維護(hù)的狀態(tài)const [counter, setCounter] = useState(0);// 這是傳遞給ChildCom2組件的數(shù)據(jù)const [counter1, setCounter1] = useState(0);// 這是傳遞給ChildCom3組件的數(shù)據(jù)const [counter2, setCounter2] = useState(0);//之所以子組件使用了memo后都無法阻止子組件之間互相影響，是因?yàn)槊看沃匦落秩镜臅r(shí)候都會(huì)生成一個(gè)圈新的test函數(shù)function test() {console.log("test");}console.log("UseCallBackOptimize組件渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div>{/*點(diǎn)擊修改數(shù)字時(shí)，ChildCom2和ChildCom3組件都會(huì)更新，原因看test上面*/}<button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom2 counter={counter1} setCounter={setCounter1} test={test}/><ChildCom3 counter={counter2} setCounter={setCounter2} test={test}/></div></div>);
}

import { memo } from "react"
function ChildCom2(props) {// 該子組件維護(hù)了一個(gè)自身的狀態(tài)// const [counter, setCounter] = useState(0);console.log("ChildCom2 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom2<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button><button onClick={() => props.test()}>test</button></div>);
}export default memo(ChildCom2);

import { memo } from "react"
function ChildCom3(props) {// 該子組件維護(hù)了一個(gè)自身的狀態(tài)// const [counter, setCounter] = useState(0);console.log("ChildCom3 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom3<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button><button onClick={() => props.test()}>test</button></div>);
}export default memo(ChildCom3);

本來調(diào)用ChildCom2的函數(shù)ChildCom3是不應(yīng)該重新渲染的，使用useCallBack可以解決這個(gè)問題，兩個(gè)子組件什么都不變的

解決后示例

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {// 這是UseCallBackOptimize組件自身維護(hù)的狀態(tài)const [counter, setCounter] = useState(0);// 這是傳遞給ChildCom2組件的數(shù)據(jù)const [counter1, setCounter1] = useState(0);// 這是傳遞給ChildCom3組件的數(shù)據(jù)const [counter2, setCounter2] = useState(0);//todo 之所以子組件使用了memo后都無法阻止子組件之間互相影響，是因?yàn)槊看沃匦落秩镜臅r(shí)候都會(huì)生成一個(gè)圈新的test函數(shù)/* function test() {console.log("test");} */// 使用了 useCallback 之后，針對(duì)test函數(shù)就做了一個(gè)緩存，如果依賴某個(gè)參數(shù)如counter，就在參數(shù)2[]里面?zhèn)魅脒M(jìn)去const newTest = useCallback(function test() {console.log("test");}, [])console.log("UseCallBackOptimize組件渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom2 counter={counter1} setCounter={setCounter1} test={newTest}/><ChildCom3 counter={counter2} setCounter={setCounter2} test={newTest}/></div></div>);
}