解析React中useMemo與useCallback的區別

2022-08-17 22:00:37

useMemo

把“建立”函數和依賴項陣列作為引數傳⼊入useMemo，它僅會在某個依賴項改變時才重新計算memoized 值。這種優化有助於避免在每次渲染時都進⾏行行⾼高開銷的計算。

importReact, { useState, useMemo } from"react";
export default functionUseMemoPage(props) {
    const [count, setCount] =useState(0);
    constexpensive=useMemo(() => {
        console.log("compute");
        let sum=0;
        for (leti=0; i<count; i++) {
            sum+=i;
        }
        return sum;//只有count變化，這⾥裡里才重新執⾏行行
      }, [count]);
    const [value, setValue] =useState("");
    return (<div><h3>UseMemoPage</h3>
    <p>expensive:{expensive}</p><p>{count}</p>            
　　<button onClick={() =>setCount(count+1)}>add</button>
　　<input value={value} onChange={event=>setValue(event.target.value)} /></div>  );
}

useCallback

把內聯回撥函數及依賴項陣列作為引數傳⼊入useCallback，它將返回該回撥函數的 memoized 版本，該回撥函數僅在某個依賴項改變時才會更更新。當你把回撥函數傳遞給經過優化的並使⽤用引⽤用相等性去避免⾮非必要渲染（例例如shouldComponentUpdate）的⼦子元件時，它將⾮非常有⽤用

importReact, { useState, useCallback, PureComponent } from"react";
export default function UseCallbackPage(props) {
    const [count, setCount] =useState(0);
    const addClick=useCallback(() => {
    let sum=0;
    for (leti=0; i<count; i++) {
        sum+=i;    
    }
    return sum;  
    }, [count]);
    const [value, setValue] =useState("");
    return (
    <div><h3>UseCallbackPage</h3>
　　<p>{count}</p>            
　　<buttononClick={() =>setCount(count+1)}>add</button>
　　<inputvalue={value} onChange={event=>setValue(event.target.value)} />
　　<ChildaddClick={addClick} /></div>  );
}
　　class ChildextendsPureComponent {
　　　　render() {
　　　　　　console.log("child render");
　　　　　　const { addClick } =this.props;

　　　　　　return (
　　　　　　　　<div><h3>Child</h3>
　　　　　　　　<buttononClick={() =>console.log(addClick())}>add</button></div>   
　　　　 )
　　}
}

useCallback(fn, deps)相當於useMemo(() => fn, deps)。

注意依賴項陣列不不會作為引數傳給“建立”函數。雖然從概念上來說它表現為：所有“建立”函數中引⽤用的值都應該出現在依賴項陣列中。未來編譯器器會更更加智慧，屆時⾃自動建立陣列將成為可能。

補充介紹React的memo與useMemo及useCallback

React.memo

概念解析
- 將元件在相同的情況下的渲染結果，快取渲染結果
- 當元件傳入props相同的引數時，淺對比之後有之前的傳入項，則複用快取最近一次結果
- 資料對比，只做淺對比。如果需要控制對比過程，需要自己寫自定義比對函數。傳引數置第二個引數 -請注意不要與 shouldComponetUpdate 返回值混合

類元件通過比對資料，可以控制渲染的方式？

React.PureComponent
shouldComponentUpdate

hooks的useMemo

概念解析
- 函陣列件的快取渲染結果
- 可以將當前的元件節點顆粒化
- 通過第二個引數去判斷，是否更新useMemo的回撥函數
- 回撥函數是一個必包，如果建立使用了 useState，會快取 state 值，不會拿到實時更新的值

hooks的useCallback

概念解析
- 返回一個需要快取的函數
- 傳遞需要更新的依賴項，一般回撥函數內部使用的資料，都需要新增在依賴項中
- 避免父子之間，子級生成新的props函數，從而重新整理子元件
  - 當父級元件傳遞給子級元件一個函數時，無狀態元件每次都會重新生成新的props函數，導致子元件重新整理
- 一般聯合useMemo一起使用

到此這篇關於React中useMemo與useCallback的區別的文章就介紹到這了,更多相關React useMemo與useCallback區別內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！