useMemo

把“創(chuàng)建”函數(shù)和依賴項(xiàng)數(shù)組作為參數(shù)傳?入useMemo，它僅會(huì)在某個(gè)依賴項(xiàng)改變時(shí)才重新計(jì)算memoized 值。這種優(yōu)化有助于避免在每次渲染時(shí)都進(jìn)?行行?高開銷的計(jì)算。

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變化，這?里里才重新執(zhí)?行行
      }, [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

把內(nèi)聯(lián)回調(diào)函數(shù)及依賴項(xiàng)數(shù)組作為參數(shù)傳?入useCallback，它將返回該回調(diào)函數(shù)的 memoized 版本，該回調(diào)函數(shù)僅在某個(gè)依賴項(xiàng)改變時(shí)才會(huì)更更新。當(dāng)你把回調(diào)函數(shù)傳遞給經(jīng)過優(yōu)化的并使?用引?用相等性去避免?非必要渲染（例例如shouldComponentUpdate）的?子組件時(shí)，它將?非常有?用

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)相當(dāng)于useMemo(() => fn, deps)。

注意依賴項(xiàng)數(shù)組不不會(huì)作為參數(shù)傳給“創(chuàng)建”函數(shù)。雖然從概念上來說它表現(xiàn)為：所有“創(chuàng)建”函數(shù)中引?用的值都應(yīng)該出現(xiàn)在依賴項(xiàng)數(shù)組中。未來編譯器?會(huì)更更加智能，屆時(shí)?自動(dòng)創(chuàng)建數(shù)組將成為可能。

補(bǔ)充介紹React的memo與useMemo及useCallback

React.memo

• 概念解析
  • 將組件在相同的情況下的渲染結(jié)果，緩存渲染結(jié)果
  • 當(dāng)組件傳入props相同的參數(shù)時(shí)，淺對(duì)比之后有之前的傳入項(xiàng)，則復(fù)用緩存最近一次結(jié)果
  • 數(shù)據(jù)對(duì)比，只做淺對(duì)比。如果需要控制對(duì)比過程，需要自己寫自定義比對(duì)函數(shù)。傳參數(shù)置第二個(gè)參數(shù) -請(qǐng)注意不要與 shouldComponetUpdate 返回值混合

類組件通過比對(duì)數(shù)據(jù)，可以控制渲染的方式？

• React.PureComponent
• shouldComponentUpdate

hooks的useMemo

• 概念解析
  • 函數(shù)組件的緩存渲染結(jié)果
  • 可以將當(dāng)前的組件節(jié)點(diǎn)顆粒化
  • 通過第二個(gè)參數(shù)去判斷，是否更新useMemo的回調(diào)函數(shù)
  • 回調(diào)函數(shù)是一個(gè)必包，如果創(chuàng)建使用了 useState，會(huì)緩存 state 值，不會(huì)拿到實(shí)時(shí)更新的值

hooks的useCallback

• 概念解析
  • 返回一個(gè)需要緩存的函數(shù)
  • 傳遞需要更新的依賴項(xiàng)，一般回調(diào)函數(shù)內(nèi)部使用的數(shù)據(jù)，都需要添加在依賴項(xiàng)中
  • 避免父子之間，子級(jí)生成新的props函數(shù)，從而刷新子組件
    • 當(dāng)父級(jí)組件傳遞給子級(jí)組件一個(gè)函數(shù)時(shí)，無狀態(tài)組件每次都會(huì)重新生成新的props函數(shù)，導(dǎo)致子組件刷新
  • 一般聯(lián)合useMemo一起使用

到此這篇關(guān)于React中useMemo與useCallback的區(qū)別的文章就介紹到這了,更多相關(guān)React useMemo與useCallback區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論