欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React?中?memo?useMemo?useCallback?到底該怎么用

 更新時間:2022年10月22日 08:38:13   作者:YinJie…  
在React函數(shù)組件中,當組件中的props發(fā)生變化時,默認情況下整個組件都會重新渲染。換句話說,如果組件中的任何值更新,整個組件將重新渲染,包括沒有更改values/props的函數(shù)/組件。在react中,我們可以通過memo,useMemo以及useCallback來防止子組件的rerender

React.memo怎么用

React.memo()是一個高階組件 (HOC),它接收一個組件A作為參數(shù)并返回一個組件B,如果組件B的 props(或其中的值)沒有改變,則組件 B 會阻止組件 A 重新渲染 。

下面我們看一個示例:

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父組件,點擊了{count}次</div>
      <ChildrenComponent />
    </div>
  );
};
const ChildrenComponent = () => {
  console.log('ChildrenComponent rending');
  return <div>我是子組件</div>;
};

點擊父組件:

可以看到控制臺中輸出了子組件里的打印,表示子組件 rerender 了,如果子組件中有龐大的 dom 結(jié)構(gòu)和計算,那是非常消耗性能的事,通過 memo 我們可以對比 render 前后的 prop 變化,如果沒有變化就不會重新 render 子組件:

const ChildrenComponent = memo(() => {
  console.log('ChildrenComponent rending');
  return <div>我是子組件</div>;
});

把子組件通過 memo 包裹后就不會因為父組件更新導致的 render 了

React.useMemo怎么用

React.memo() 是一個 HOC,而 useMemo() 是一個 React Hook。 使用 useMemo(),我們可以返回記憶值來避免函數(shù)的依賴項沒有改變的情況下重新渲染。并且可以避免在每次渲染時都進行高開銷的計算的優(yōu)化的策略。

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值變化時才會觸發(fā)sum函數(shù)執(zhí)行

React.memo()和useMemo()的主要區(qū)別

從上面的例子中,我們可以看到 React.memo()useMemo() 之間的主要區(qū)別:

  • React.memo() 是一個高階組件,我們可以使用它來包裝我們不想重新渲染的組件,除非其中的 props 發(fā)生變化
  • useMemo() 是一個 React Hook,我們可以使用它在組件中包裝函數(shù)。 我們可以使用它來確保該函數(shù)中的值僅在其依賴項之一發(fā)生變化時才重新計算

雖然 memoization 似乎是一個可以隨處使用的巧妙小技巧,但只有在絕對需要這些性能提升時才應該使用它。 Memoization 會占用運行它的機器上的內(nèi)存空間,因此可能會導致意想不到的效果。

React.useCallback怎么用

我們看一下下面這個示例:

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const [ childCount, setChildCount ] = useState(0)
  const handleChildren = () => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  };
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父組件,點擊了{count}次</div>
      <ChildrenComponent handleChildren={handleChildren} data={childCount}/>
    </div>
  );
};
const ChildrenComponent = memo(({ handleChildren, data }) => {
  console.log('ChildrenComponent rending', data);
  return <div onClick={handleChildren}>ChildrenComponent,子組件被點擊了{data}次 </div>;
});

在上面的例子中,我們把子組件通過 React.memo 包起來了,希望在父組件更新的時候,子組件不會 再次render,那么會和我們想的一樣嗎?

當點擊父組件時,子組件再次 render 了, 因為子組件的 prop 傳入了有函數(shù) handleChildren ,當點擊父組件時更改了 state 值導致父組件重新 render,那么原來的 hanldeChildren 函數(shù)和更新后的 hanldeChildren 顯然處在不同的執(zhí)行環(huán)境中,他們并不是一個函數(shù),在內(nèi)存中不是同一個引用地址,所以就導致了 memo 的包裹無效,因為 prop 改變了。

useCallback 需要傳入兩個參數(shù)

  • callback(僅僅是個函數(shù)),把要做事情的函數(shù)放在callback函數(shù)體內(nèi)執(zhí)行
  • deps 要做事情的函數(shù)需要引入的外部參數(shù)或者是依賴參數(shù)
  const handleChildrenCallback = useCallback(() => {
    handleChildren();
  }, []);// 咱們不需要就不要傳入

useCallback 返回一個 memoized 回調(diào)函數(shù)。在依賴參數(shù)不變的情況下,返回的回調(diào)函數(shù)是同一個引用地址

注意 每當依賴參數(shù)發(fā)生改變useCallback就會自動重新返回一個新的 memoized 函數(shù)(地址發(fā)生改變)

上面就是沒有使用 useCallBack 的使用場景,現(xiàn)在我們知道了,把要傳遞的函數(shù)參數(shù)通過 useCallBack 包裹一層,這樣返回的回調(diào)函數(shù)就是同一個引用地址,這樣子組件就不會 rerender 了:

 const handleChildren = useCallback(() => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  }, [setChildCount]);

現(xiàn)在在點擊父組件后,子組件就不會再 rerender 了。

大伙現(xiàn)在應該明白了useCallback的作用了,它主要用來配合memo用于優(yōu)化子組件的渲染次數(shù)

memo與useMemo及useCallback的區(qū)別

  • memo用來優(yōu)化函數(shù)組件的重復渲染行為,針對的是一個組件
  • useMemo返回一個memoized的值
  • 本質(zhì)都是用同樣的算法來判定依賴是否發(fā)生改變,繼而決定是否觸發(fā)memo或者useMemo中的邏輯,利用memo就可以避免不必要的重復計算,減少資源浪費
  • useCallback返回一個memoized的函數(shù)

防止不必要的 effect

如果一個值被 useEffect 依賴,那它可能需要被緩存,這樣可以避免重復執(zhí)行 effect。

const Component = () => {
  // 在 re-renders 之間緩存 a 的引用
  const a = useMemo(() => ({ test: 1 }), []);
  useEffect(() => {
    // 只有當 a 的值變化時,這里才會被觸發(fā)
    doSomething();
  }, [a]);
  // the rest of the code
};

useCallback 同理:

const Component = () => {
  // 在 re-renders 之間緩存 fetch 函數(shù)
  const fetch = useCallback(() => {
    console.log('fetch some data here');
  }, []);
  useEffect(() => {
    // 僅fetch函數(shù)的值被改變時,這里才會被觸發(fā)
    fetch();
  }, [fetch]);
  // the rest of the code
};

當變量直接或者通過依賴鏈成為 useEffect 的依賴項時,那它可能需要被緩存。這也是 useMemo 和 useCallback 得基本用法之一。

到此這篇關(guān)于React 中 memo useMemo useCallback 到底該怎么用的文章就介紹到這了,更多相關(guān)React memo useMemo useCallback內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React?split實現(xiàn)分割字符串的使用示例

    React?split實現(xiàn)分割字符串的使用示例

    當我們需要將一個字符串按照指定的分隔符進行分割成數(shù)組時,我們可以在組件的生命周期方法中使用split方法來實現(xiàn)這個功能,本文就來介紹一下,感興趣的可以了解下
    2023-10-10
  • react MPA 多頁配置詳解

    react MPA 多頁配置詳解

    這篇文章主要介紹了react MPA 多頁配置詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • 解析TypeError:import_react_native.AppState.removeEventListener?is?not?a?function

    解析TypeError:import_react_native.AppState.removeEventListener

    這篇文章主要為大家介紹了TypeError:import_react_native.AppState.removeEventListener?is?not?a?function問題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-09-09
  • React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn)

    React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn)

    本文主要介紹了React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價值,感興趣的可以了解一下
    2023-10-10
  • react dva實現(xiàn)的代碼

    react dva實現(xiàn)的代碼

    dva是一個基于redux和redux-saga的數(shù)據(jù)流方案,然后為了簡化開發(fā)體驗,dva額外內(nèi)置了react-router,fetch,可以激烈為一個輕量級的應用框架,這篇文章主要介紹了react dva實現(xiàn),需要的朋友可以參考下
    2021-11-11
  • React事件監(jiān)聽和State狀態(tài)修改方式

    React事件監(jiān)聽和State狀態(tài)修改方式

    這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 關(guān)于React16.0的componentDidCatch方法解讀

    關(guān)于React16.0的componentDidCatch方法解讀

    這篇文章主要介紹了關(guān)于React16.0的componentDidCatch方法解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • JavaScript React如何修改默認端口號方法詳解

    JavaScript React如何修改默認端口號方法詳解

    這篇文章主要介紹了JavaScript React如何修改默認端口號方法詳解,文中通過步驟圖片解析介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • 基于visual studio code + react 開發(fā)環(huán)境搭建過程

    基于visual studio code + react 開發(fā)環(huán)境搭建過程

    今天通過本文給大家分享基于visual studio code + react 開發(fā)環(huán)境搭建過程,本文給大家介紹的非常詳細,包括react安裝問題及安裝 Debugger for Chrome的方法,需要的朋友跟隨小編一起看看吧
    2021-07-07
  • Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團隊在復雜業(yè)務中的開發(fā)需求,需要的朋友可以參考下
    2022-07-07

最新評論