memo
用于減少組件的刷新次數(shù)呻率，作用相當(dāng)于
PureComponent,會(huì)進(jìn)行一個(gè)淺比較
React.memo(component,function):第一個(gè)是普通的組件；第二個(gè)參數(shù)是一個(gè)方法吐咳，用于控制是否刷新（類似于shouldComponentUpdate）
一般來(lái)說(shuō)只傳一個(gè)參數(shù)即可
const Home = () => {
const [count,setCound] = useState(0)
const [price,setPrice] = useState(0)
return (
<>
<button onClick={()=>setCound(count+1)}>add</button>
{/* <Child number={count}/> */}
<ChildMemo number={count}/>
<button onClick={()=>setPrice(price+10)}>{price}</button>
</>
)
}
function Child(props:any){
console.log('Child render')
return <div>{props.number}</div>
}
// const ChildMemo = memo(Child)
const ChildMemo = memo(Child,(prev,next)=>{
return next.number % 2 != 0
})
export default Home;
useMemo
用于緩存一個(gè)值求妹，減少組件的不必要刷新
值可以是一個(gè)結(jié)果塞帐，也可以是一個(gè)組件
useMemo(()=>{...... return ...},[value1..]) 兩個(gè)參數(shù)沪羔，第一個(gè)是方法象浑；第二個(gè)是一個(gè)數(shù)組，只有數(shù)組中的值改變篓吁，第一個(gè)方法才會(huì)執(zhí)行
const Home = () => {
const [count,setCound] = useState(0)
const [price,setPrice] = useState(0)
const totalDiv = useMemo(()=>{
console.log('totalDiv');
return <span>{count*11}</span>
},[count]) //只有count改變才會(huì)觸發(fā) 返回一個(gè)組件
const total = useMemo(()=>{
console.log('total');
return count*22
},[count]) //只有count改變才會(huì)觸發(fā) 返回一個(gè)結(jié)果
return (
<>
<button onClick={()=>setCound(count+1)}>add</button>
{/* <Child number={count}/> */}
<ChildMemo number={count}/>
<button onClick={()=>setPrice(price+10)}>{price}</button>
{totalDiv}
{total}
</>
)
}
useCallback
用于緩存一個(gè)方法 （類似于 useMemo(fn)） 杖剪，減少組件的不必要刷新
useCallback(()=>{...},[value1..]) 兩個(gè)參數(shù)驰贷，第一個(gè)是方法；第二個(gè)是一個(gè)數(shù)組次兆，只有數(shù)組中的值改變锹锰，第一個(gè)方法才會(huì)執(zhí)行
例如：父類給子類傳遞方法狈邑，父類改變了state蚤认，則子類會(huì)被重新render
const Home = () => {
const [count,setCound] = useState(0)
const [price,setPrice] = useState(0)
const totalResultCallBack = useCallback(()=>{
console.log('totalResultCallBack');
},[count])
const totalResult = ()=>{
console.log('totalResult');
}
return (
<>
<button onClick={()=>setCound(count+1)}>add</button>
// 此處傳遞 totalResult
//state改變以后砰琢，totalResult會(huì)重新聲明良瞧，memo用法也失效。
//改變其他值時(shí) ChildMemo 會(huì)刷新
<ChildMemo number={count} onClick={totalResult}/>
// 此處傳遞 totalResultCallBack
//已經(jīng)通過(guò) useCallback 進(jìn)行緩存挚冤，只有count改變時(shí)才會(huì)更改
//改變其他值時(shí) ChildMemo 不會(huì)刷新
<ChildMemo number={count} onClick={totalResultCallBack}/>
<button onClick={()=>setPrice(price+10)}>{price}</button>
</>
)
}
function Child(props:any){
console.log('Child render')
return <div onClick={props.onClick}>{props.number}</div>
}
const ChildMemo = memo(Child)
export default Home;
