快捷導(dǎo)航

React中useCallback useMemo使用方法快速精通

更新時(shí)間：2023年02月14日 16:53:31 作者：星海拾遺

在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的rerender

useCallback和useMemo的區(qū)別

基本使用

	// 貼上代碼片利于復(fù)制
	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const callBack = useCallback(() => {
	    console.log(1);
	  }, []);
	  const memo = useMemo(() => 123, []);
	  console.log("callback", callBack);
	  console.log("memo是", memo);
	  return (
	    <div>
	      <div>一個(gè)專門(mén)用于vue測(cè)試的頁(yè)面</div>
	    </div>
	  );
}

控制臺(tái)輸出如下

可以直觀的看到，useCallBack返回的是一個(gè)函數(shù)，useMemo返回的是一個(gè)變量。

接下來(lái)我們來(lái)剖析這兩個(gè)東西的用法

useMemo

首先從簡(jiǎn)單的講起，如果你學(xué)過(guò)Vue的話，完全可以把它當(dāng)成Computed來(lái)理解。在這里舉一個(gè)很好理解的

	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getComplicatedValue = () => {
	    console.log("開(kāi)始計(jì)算一個(gè)復(fù)雜的value值啦！");
	    let total = 0;
	    for (let i = 0; i < 100; i++) {
	      total += i;
	    }
	    return total;
	  };
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一個(gè)專門(mén)用于vue測(cè)試的頁(yè)面</div>
	      <div>這是一個(gè)復(fù)雜函數(shù)計(jì)算出來(lái)的值{getComplicatedValue()}</div>
	      <div>這是一個(gè)簡(jiǎn)簡(jiǎn)單單的data值{data}</div>
	      <button onClick={changeData}>點(diǎn)擊我改變data值</button>
	    </div>
	  );
	}

大意就是，頁(yè)面上有一個(gè)很簡(jiǎn)單的值data,還有一個(gè)很復(fù)雜的經(jīng)過(guò)函數(shù)計(jì)算出來(lái)的值getComplicatedValue，這里我用從1加到100來(lái)模擬了一個(gè)很復(fù)雜的計(jì)算過(guò)程（實(shí)際項(xiàng)目會(huì)更復(fù)雜）。

頁(yè)面顯示如下

顯示正常，根據(jù)控制臺(tái)顯示也可以看到getComplicatedValue函數(shù)也被正常調(diào)用了。接下來(lái)我們點(diǎn)擊按鈕改變data的值。

可以看到頁(yè)面是正常更新了的，但是性能問(wèn)題出現(xiàn)了，我改變了data的值，導(dǎo)致render函數(shù)重新執(zhí)行，然后getComplicatedValue又被執(zhí)行了一遍！也就是計(jì)算機(jī)重新計(jì)算了1加到100。那么問(wèn)題出現(xiàn)了，如果我是1加到100000呢？很顯然，在我們更新data值的時(shí)候，并不需要getComplicatedValue再次執(zhí)行，而是希望它的計(jì)算值被緩存起來(lái)。useMemo閃亮登場(chǎng)!!!當(dāng)當(dāng)當(dāng)當(dāng)。

改寫(xiě)如下,改寫(xiě)只需要改動(dòng)兩行

	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getComplicatedValue = useMemo(() => {
	    console.log("開(kāi)始計(jì)算一個(gè)復(fù)雜的value值啦！");
	    let total = 0;
	    for (let i = 0; i < 100; i++) {
	      total += i;
	    }
	    return total;
	  },[]);
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一個(gè)專門(mén)用于vue測(cè)試的頁(yè)面</div>
	      <div>這是一個(gè)復(fù)雜函數(shù)計(jì)算出來(lái)的值{getComplicatedValue}</div>
	      <div>這是一個(gè)簡(jiǎn)簡(jiǎn)單單的data值{data}</div>
	      <button onClick={changeData}>點(diǎn)擊我改變data值</button>
	    </div>
	  );
	}

第四行把getComplicatedValue函數(shù)用useMemo包裹起來(lái)。第18行刪除()，因?yàn)閯倓傄呀?jīng)說(shuō)過(guò)，useMemo返回的是一個(gè)值而不是函數(shù)。

接下來(lái)再看看頁(yè)面效果

這次可以看到，無(wú)論data值更新多少次，getComplicatedValue永遠(yuǎn)只執(zhí)行了初始化的那一次。

來(lái)個(gè)首尾呼應(yīng)

基本使用

const memo = useMemo(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依賴項(xiàng)數(shù)組])

如果依賴項(xiàng)數(shù)組里面的數(shù)據(jù)沒(méi)有變化，那么memo值永遠(yuǎn)使用緩存，而不會(huì)重新計(jì)算

useCallback

useCallback比起useMemo就難上了一丟丟，因?yàn)樯婕暗搅俗咏M件。當(dāng)然也是灰常簡(jiǎn)單。

首先來(lái)看一個(gè)簡(jiǎn)單

父組件

	import { React, useState, useMemo, useCallback } from "react";
	import TestSonComp from "./testSonComp";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getValue = () => {
	    console.log("我是父組件的一個(gè)函數(shù)");
	  };
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一個(gè)專門(mén)用于vue測(cè)試的頁(yè)面</div>
	      <div>這是一個(gè)簡(jiǎn)簡(jiǎn)單單的data值{data}</div>
	      <button onClick={changeData}>點(diǎn)擊我改變data值</button>
	      <TestSonComp getValue={getValue} />
	    </div>
	  );
}

子組件

	import { React, memo } from "react";
	const TestSonComp = (props) => {
	  console.log("子組件render函數(shù)執(zhí)行了");
	  return <div>一個(gè)子組件</div>;
	};
	export default TestSonComp;

頁(yè)面顯示正常，然后點(diǎn)擊按鈕更新數(shù)據(jù)

那么此時(shí)問(wèn)題又出現(xiàn)了，我就是在父組件中改了一下data值，data值導(dǎo)致父組件render重新執(zhí)行，render生成了一個(gè)新的getValue函數(shù)，然后子組件props更新，導(dǎo)致子組件更新。那么有沒(méi)有一個(gè)方法可以把函數(shù)緩存起來(lái)呢？

useCallback閃亮登場(chǎng)。

直接改寫(xiě)父組件定義函數(shù)的一行

	  const getValue = useCallback(() => {
	    console.log("我是父組件的一個(gè)函數(shù)");
	  }, []);

改完之后看頁(yè)面效果你依然會(huì)發(fā)現(xiàn)和上圖一樣，子組件依然會(huì)更新！

問(wèn)題出在這

useCallback必須配合React.memo來(lái)使用

react的Hooks組件對(duì)props的淺比較是在memo里面比較的（類組件是在shouldComponentUpdate里面），如果沒(méi)有memo，那么你使用useCallback就沒(méi)有意義

怎么使用？

子組件直接改寫(xiě)最后一行

export default memo(TestSonComp);

二話不說(shuō)看效果

改寫(xiě)成功

再來(lái)個(gè)溫故知新

基本使用

const callback = useCallback(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依賴項(xiàng)數(shù)組])

如果依賴項(xiàng)數(shù)組里面的數(shù)據(jù)沒(méi)有變化，那么函數(shù)值也永遠(yuǎn)使用緩存。

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

您可能感興趣的文章: