useCallback
（1）作用：
使用形式：
const returnFunction = useCallback(
()=>{},// 參數(shù)1：inline回調(diào)函數(shù)
[],// 參數(shù)2：依賴數(shù)據(jù)
)
useCallback返回值是一個(gè)函數(shù)也就是前面的returnFunction暴匠，它的參數(shù)有兩個(gè)一個(gè)是inline回調(diào)函數(shù)锈津，一個(gè)是依賴項(xiàng)。只有依賴項(xiàng)發(fā)生變化的時(shí)候會(huì)產(chǎn)生一個(gè)新的callback函數(shù)拷况。第二個(gè)參數(shù)數(shù)組是必須的惯驼，如果默認(rèn)為空的情況下只會(huì)產(chǎn)生一次新的callback函數(shù)∝拜【注：】useCallback到底返回的是個(gè)什么玩意兒：（這里存疑爹谭？？榛搔？）
useCallback其實(shí)返回的就是它的第一個(gè)參數(shù)內(nèi)聯(lián)函數(shù)诺凡。但是它分為兩種情況：當(dāng)依賴項(xiàng)發(fā)生改變的時(shí)候返回的是更新后的第一個(gè)函數(shù)參數(shù)；如果依賴項(xiàng)沒有發(fā)生變化返回的就是未經(jīng)更新的原始的函數(shù)參數(shù)
（1）使用場(chǎng)景：
useCallback的使用目的不是為了解決它的參數(shù)1內(nèi)聯(lián)函數(shù)重復(fù)創(chuàng)建的問題药薯，而是為了解決控件的重復(fù)渲染绑洛。
舉個(gè)例子：
function Comp(){
const [data1,setData1] = useState(0);
const [data2,useData2] = useState(0);
const handleClick1 = ()=>{
setData1(data1+1)
}
const handleClick2 = ()=>{
setData2(data2+1)
}
return (
<div>
<Cheap onClick={handleClick1}>組件Cheap:{data1}</Cheap>
<Expensive onClick={handleClick2}>組件Cheap:{data2}</Expensive>
</div>
);
}
Cheap是一個(gè)渲染成本比較低的組件，Expensive是一個(gè)渲染成本比較高的組件童本。但是在點(diǎn)擊Cheap的時(shí)候也會(huì)導(dǎo)致Expensive的組件也被重新渲染真屯，即使data2的值并沒有改變，這就增加了渲染的成本穷娱。
而useCallback就能很好的解決這個(gè)重復(fù)渲染的問題绑蔫。
（2）使用方法：
import React, { useState, memo, useCallback } from 'react';
function Comp(){
const [data1,setData1] = useState(0);
const [data2,useData2] = useState(0);
const handleClick1 = ()=>{
setData1(data1+1)
}
const handleClick2 = useCallback(
()=>{
setData2(data2+1);
},
[data2]
)
return (
<div>
<Cheap onClick={handleClick1}>組件Cheap:{data1}</Cheap>
<Expensive onClick={handleClick2}>組件Cheap:{data2}</Expensive>
</div>
);
}
這樣只會(huì)在expensive發(fā)生點(diǎn)擊事件的時(shí)候才會(huì)去更新handleClick2。不會(huì)產(chǎn)生點(diǎn)擊Cheap也會(huì)一起渲染Expensive的情況了泵额。
