usememo
const memoizedvalue = usememo(() => computeexpensivevalue(a, b), [a, b]);
將「建立」函式和依賴項新增到引數上使用備註，它僅會在某個依賴項改變時才重新計算備忘錄值。這種優化避免在每次渲染時都進行高開銷的計算。
也就是說usememo可以讓函式在某個依賴項改變的時候才執行，這可以避免很多額外的開銷。舉個例子：
不使用usememo
function example() , (v, i) => i).reduce((a, b) => a+b)}, [count])
return
總和：setcount(count + 1)}>+1
event => setvalue(event.target.value)}/>
;}
使用usememo後，成為count作為依賴值傳遞
進去，此時僅
當count變化時才會重新執行getnum。
usecallback
const memoizedcallback =usecallback(() =>,
[a, b],
);
將內聯變數函式和依賴項替換為引數**使用，**返回該變數函式的備註，版本，該變數函式僅在某個依賴項改變時才會更新。當您將函式傳遞給經過優化的並使用引用替代性去避免非必要渲染（例如shouldcomponentupdate）的子元件時，則非常有用。
看起來似乎和usememo差不多，我們來看看這兩個有什麼異同：
usememo和usecallback接收的引數都是一樣，都是在其依賴項發生變化後才執行，都是返回快取的值，區別在於usememo返回的是函式執行的結果，usecallback返回的是函式。
usecallback（fn，deps）相當於usememo（（）=> fn，deps）使用場景
頂部上面所說的，當你把某些函式傳遞給經過優化的並使用引用替代性去避免非必要渲染（例如shouldcomponentupdate）的子元件時，則非常有用。而父元件傳遞乙個函式給子元件的時候，由於父元件的更新會導致該函式重新生成從而傳遞給子元件的函式引用發生了變化，這就會導致子元件也會更新，而很多時候子元件的更新是沒必要的，所以我們可以通過usecallback來快取該函式，然後傳遞給子元件。舉個例子：
function parent() , (v, i) => i).reduce((a, b) => a+b)}, [count])
return
setcount(count + 1)}>+1
event => setvalue(event.target.value)}/>
;}const child =react.memo(function (: any)
})
使用usecallback之後，僅當count發生變化時child元件才會重新渲染，而val變化時，child元件是不會重新渲染的。
useCallback和useMemo用法區別
1.usecallback 作用 在依賴項發生變化的時候，返回乙個新的函式引用。需求 1 請求資料的介面需要放在useeffect外面，因為要將該方法傳遞給子元件 2 在conditions發生變化時，自動執行該函式 3 只有在conditions發生變化時，才會重新render子元件中的內容。如下...
useMemo與useCallback使用指南
在介紹一下這兩個hooks的作用之前，我們先來回顧一下react中的效能優化。在hooks誕生之前，如果元件包含內部state，我們都是基於class的形式來建立元件。當時我們也知道，react中，效能的優化點在於 呼叫setstate，就會觸發元件的重新渲染，無論前後的state是否不同 父元件更...
和 區別和聯絡， 和 區別和聯絡
和 區別和聯絡，和 區別和聯絡，實際專案中，什麼情況用哪種？首先，和 的聯絡 共同點 和 都可以用作 邏輯與 運算子，都是雙目運算子。具體要看使用時的具體條件來決定。無論使用哪種運算子，對最終的運算結果都沒有影響。情況1 當上述的運算元是boolean型別變數時，和 都可以用作邏輯與運算子。情況2 ...