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

React?正確使用useCallback?useMemo的方式

 更新時(shí)間:2022年08月08日 14:34:51   作者:vs心動(dòng)  
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下

正確使用useCallback useMemo的姿勢(shì)

說(shuō)起useCallback useMemo大家肯定在React都不陌生,但是真正了解它們的作用,還是有一部分同學(xué)對(duì)此是一知半解,只是知道用它,卻不知道它真正的含義。
今天帶大家學(xué)習(xí)一下它們的真正蘊(yùn)藏的作用。
useCallback useMemo 都是記憶函數(shù),什么是記憶函數(shù)呢?
用個(gè)最簡(jiǎn)單的例子來(lái)講 useState 也是記憶函數(shù) 細(xì)想一下以下代碼,為什么setcount每次改變會(huì)引起組件重新render,但是count為什么不會(huì)再次被初始值0進(jìn)行賦值呢?
如果是這樣的話,我們就不能修改成功了,所以說(shuō)存在某個(gè)地方保存了state的值,而這個(gè)地方是不會(huì)受到render的影響的,state就被緩存起來(lái)了。

const [count, setcount] = useState(0);

那么 useCallback useMemo 也是被緩存起來(lái)了嗎?讓我們逐個(gè)來(lái)看看

useCallback

useCallback 的作用是啥?我們來(lái)看看下面的代碼:

import React, { memo, useCallback, useState } from "react";

const HookTest = memo(() => {
  const [count, setcount] = useState(0);
  const [num, setnum] = useState(100);
  const showCount = () => {
 	console.log("沒(méi)事執(zhí)行玩玩", count + "$");
  };
  return (
    <div>
      <h2>HookTest:useCallback----useMemo</h2>
      <h3>useCallBack</h3>
      <h4>
        count:{count}---num:{num}
      </h4>
      <button onClick={showCount}>showCount</button>
      <button onClick={(e) => setcount(count + 3)}>+3</button>
      <button onClick={(e) => setnum(num * 10)}>*10</button>
  );
});

export default HookTest;

正常執(zhí)行的話,修改count 和 num 都會(huì)觸發(fā) render ,這是毫無(wú)疑問(wèn)的。那么showCount 每次render也會(huì)被重新創(chuàng)建一次,這也是情理之中的。 但是我們想想,真的有必要每次render都重新創(chuàng)建showCount 嗎?現(xiàn)在可能只有一個(gè)函數(shù),函數(shù)體也簡(jiǎn)單,重新創(chuàng)建也影響不了什么,但是真正開(kāi)發(fā)的時(shí)候卻是我們要考慮的問(wèn)題。 所以 useCallback 來(lái)幫我們解決這個(gè)問(wèn)題了!

 const showCount = () => {
 	console.log("沒(méi)事執(zhí)行玩玩", count + "$");
  };
  
  const showCount = useCallback(() => {
    console.log("沒(méi)事執(zhí)行玩玩", count + "$");
  }, [count]);

useCallback 接收兩個(gè)參數(shù) 第一個(gè)為需要緩存的函數(shù) 第二個(gè)為數(shù)組,裝載依賴

那么現(xiàn)在的 showCount 和之前的又有什么不一樣呢?
現(xiàn)在的 showCount 是被緩存起來(lái)了,組件render時(shí),如果裝載依賴的數(shù)組中的依賴未更新,那么依然采用緩存的函數(shù)。也就是說(shuō)只有當(dāng)我點(diǎn)修改count時(shí)觸發(fā)更新組件render后,showCount 也重新創(chuàng)建,但是當(dāng)我進(jìn)行其他的操作引起組件render時(shí),由于此時(shí)條件依賴跟裝載依賴的數(shù)組中依賴毫無(wú)關(guān)系,showCount 用的是緩存里的函數(shù)。這就是 useCallback 的正確使用方法啦~

useMemo

看下面案例:

import React, { memo, useMemo, useState } from "react";

const HookTest = memo(() => {
const [count, setcount] = useState(0);
  const [arr, setarr] = useState([
    {
      flag: true,
      num: 20,
    },
    {
      flag: false,
      num: 10,
    },
    {
      flag: true,
      num: 40,
    },
    {
      flag: true,
      num: 60,
    },
    {
      flag: true,
      num: 70,
    },
    {
      flag: true,
      num: 80,
    },
  ]);

   const allNum = () =>
     arr.reduce(
       (preValue, currentValue) =>
         currentValue.flag ? preValue + currentValue.num : preValue,
       0
     );
  return (
    <div>
      <h2>HookTest:useCallback----useMemo</h2>
      <h3>useMemo</h3>
       <h4>
        count:{count}
      </h4>
      <button onClick={(e) => setcount(count + 3)}>+3</button>
      <h4>all:{allNum}</h4>
    </div>
  );
});
export default HookTest;

很簡(jiǎn)單的小案例,根據(jù)條件對(duì)數(shù)組求和操作,同樣我們點(diǎn)擊修改count 然后組件重新render
此時(shí)我們考慮一個(gè)問(wèn)題,是不是 allNum 又進(jìn)行了一次復(fù)雜的運(yùn)行然后得到結(jié)果?現(xiàn)在看來(lái)才幾條數(shù)據(jù),怎么復(fù)雜了,我們得考慮數(shù)組若是幾百上千上萬(wàn)呢?我們都知道組件渲染是很頻繁的,那么每次渲染我們真的有必要去每次進(jìn)行復(fù)雜的運(yùn)算嗎?

所以這就是性能優(yōu)化的另一個(gè)點(diǎn)了 引出 useMemo來(lái)幫助我們解決

將allNum 改造后:

const allNum = () =>
     arr.reduce(
       (preValue, currentValue) =>
         currentValue.flag ? preValue + currentValue.num : preValue,
       0
     );
  
  const allNum = useMemo(
    () =>
      arr.reduce(
        (preValue, currentValue) =>
          currentValue.flag ? preValue + currentValue.num : preValue,
        0
      ),
    [arr]
  );

useMemo 同樣接收兩個(gè)參數(shù) 第一個(gè)參數(shù)是函數(shù)的返回值!! 第二個(gè)為數(shù)組,裝載依賴
用了之后呢?有那些改變呢?
現(xiàn)在 allNum 不再是一個(gè)函數(shù)了,而是一個(gè)返回值現(xiàn)在如果進(jìn)行和依賴數(shù)組無(wú)關(guān)的render時(shí),allNum 將采用上次緩存的返回值,不用再去傻傻的計(jì)算一遍啦。

總結(jié)

簡(jiǎn)單給大家總結(jié)下:

  • useCallback 緩存函數(shù)
  • useMemo 緩存函數(shù)返回值
  • 都是解決組件頻繁渲染從而頻繁創(chuàng)建函數(shù)及頻繁運(yùn)行函數(shù)
  • 正確的思路應(yīng)該是 跟我有關(guān)的時(shí)候我才需要去重新創(chuàng)建函

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

相關(guān)文章

  • react?card?slider實(shí)現(xiàn)滑動(dòng)卡片教程示例

    react?card?slider實(shí)現(xiàn)滑動(dòng)卡片教程示例

    這篇文章主要為大家介紹了react?card?slider實(shí)現(xiàn)滑動(dòng)卡片教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 基于antd的autocomplete的二次封裝查詢示例

    基于antd的autocomplete的二次封裝查詢示例

    這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • react lazyLoad加載使用詳解

    react lazyLoad加載使用詳解

    lazy是React提供的懶(動(dòng)態(tài))加載組件的方法,React.lazy(),路由組件代碼會(huì)被分開(kāi)打包,能減少打包體積、延遲加載首屏不需要渲染的組件,依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性,給lazy加上loading指示器組件,Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能
    2023-03-03
  • React中react-redux和路由詳解

    React中react-redux和路由詳解

    這篇文章主要介紹了React中react-redux和路由詳解,redux早期被設(shè)計(jì)成可以在各個(gè)框架中使用,因此在不同的框架中使用的時(shí)候,要引入相應(yīng)的插件,感興趣的朋友可以繼續(xù)學(xué)習(xí)下面文章
    2022-08-08
  • react路由v6版本NavLink的兩個(gè)小坑及解決

    react路由v6版本NavLink的兩個(gè)小坑及解決

    這篇文章主要介紹了react路由v6版本NavLink的兩個(gè)小坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • react中如何使用局部樣式

    react中如何使用局部樣式

    這篇文章主要介紹了react中如何使用局部樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React?Native性能優(yōu)化指南及問(wèn)題小結(jié)

    React?Native性能優(yōu)化指南及問(wèn)題小結(jié)

    本文將介紹在React?Native開(kāi)發(fā)中常見(jiàn)的性能優(yōu)化問(wèn)題和解決方案,包括ScrollView內(nèi)無(wú)法滑動(dòng)、熱更新導(dǎo)致的文件引用問(wèn)題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧
    2024-01-01
  • React組件實(shí)例三大屬性state props refs使用詳解

    React組件實(shí)例三大屬性state props refs使用詳解

    這篇文章主要為大家介紹了React組件實(shí)例三大屬性state props refs使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例

    react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例

    本篇文章主要介紹了react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-09-09
  • react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決

    react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決

    這篇文章主要介紹了react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03

最新評(píng)論