React中useMemo與useCallback的區別是什么

這篇文章主要介紹“React中useMemo與useCallback的區別是什么”，在日常操作中，相信很多人在React中useMemo與useCallback的區別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React中useMemo與useCallback的區別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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><h4>UseMemoPage</h4>
    <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><h4>UseCallbackPage</h4>
　　<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><h4>Child</h4>
　　　　　　　　<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的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！