hooks 中在也不需要this的概念了，并且必須放到函數(shù)組件內(nèi)部最外層 最上面
引入?useMemo 和?useCallback
import?React,?{?useMemo,?useCallback }?from?"react";
useMemo
先看一個例子：
useMemo(()?=>?{
????return?count;
??},[count]);
?useMemo(params) 設(shè)置 第一個參數(shù)是函數(shù)
count是第二個參數(shù) 是 追蹤變化的值
正常情況下 只要在當(dāng)前組件組件 數(shù)據(jù)狀態(tài)發(fā)生變化 當(dāng)前的內(nèi)部所有的邏輯 都會重新計算 并且 render一遍
比如:
const?[value,setValue]?=?useState(''");
const?[value2,setValue2]?=?useState(''");
const?handleChange = (e) => {
setValue（e.target.value）
}
const?c= () => {
return 456;
}
<div>{c()} </div>
<input?type="text"?value={value}?onChange={(e)?=>?handleChange(e)}?/>
<button onClick={() => setValue2(math.random())}></button>
一般setValue和setValue2? 只要有一方點擊 c函數(shù) 都會執(zhí)行
這樣就浪費了性能 我們只想在input值改變的時候 執(zhí)行c函數(shù) 所以我們可以使用useMemo
?hook
const?[value,setValue]?=?useState(''");
const?[value2,setValue2]?=?useState(''");
const?handleChange?= (e) => {
setValue（e.target.value）
}
const?c= useMemo （() => {
return 456;
}，[value]）
<div>{c()} </div>?
<input type="text" value={value} onChange={(e) => handleChange(e)} />
?<button onClick={() => setValue2(math.random())}></button>
這樣 是有value值改變的時候 才會執(zhí)行 c函數(shù)
useCallback
useMemo和useCallback 唯一區(qū)別是
useMemo 是 內(nèi)部返回的是一個值
useCallback?是 內(nèi)部返回的是一個當(dāng)前函數(shù)
例如:
useMemo(() => {
return '2'
})
useMemo 返回的是 2；
useCallback 返回的是?() => {
return '2'
}
所以一般時候?useCallback 可以當(dāng)做是class組件的shouldComponentUpdate
以下是我的demo
父組件
子組件
有寫錯的地方，歡迎指正，不勝感激！
筆者QQ群：148042812
