React中useCallback useMemo使用方法快速精通
首先從簡單的講一下兩者的區(qū)別
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>一個專門用于vue測試的頁面</div>
</div>
);
}
控制臺輸出如下
可以直觀的看到，useCallBack返回的是一個函數(shù)，useMemo返回的是一個變量。
接下來我們來剖析這兩個東西的用法
useMemo
首先從簡單的講起，如果你學(xué)過Vue的話，完全可以把它當成Computed來理解。在這里舉一個很好理解的
import { React, useState, useMemo, useCallback } from "react";
export default function TestPage() {
const [data, updateData] = useState(1);
const getComplicatedValue = () => {
console.log("開始計算一個復(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>一個專門用于vue測試的頁面</div>
<div>這是一個復(fù)雜函數(shù)計算出來的值{getComplicatedValue()}</div>
<div>這是一個簡簡單單的data值{data}</div>
<button onClick={changeData}>點擊我改變data值</button>
</div>
);
}
大意就是，頁面上有一個很簡單的值data,還有一個很復(fù)雜的經(jīng)過函數(shù)計算出來的值getComplicatedValue，這里我用從1加到100來模擬了一個很復(fù)雜的計算過程（實際項目會更復(fù)雜）。
頁面顯示如下
顯示正常，根據(jù)控制臺顯示也可以看到getComplicatedValue函數(shù)也被正常調(diào)用了。接下來我們點擊按鈕改變data的值。
可以看到頁面是正常更新了的，但是性能問題出現(xiàn)了，我改變了data的值，導(dǎo)致render函數(shù)重新執(zhí)行，然后getComplicatedValue又被執(zhí)行了一遍！也就是計算機重新計算了1加到100。那么問題出現(xiàn)了，如果我是1加到100000呢？很顯然，在我們更新data值的時候，并不需要getComplicatedValue再次執(zhí)行，而是希望它的計算值被緩存起來。useMemo閃亮登場!!!當當當當。
改寫如下,改寫只需要改動兩行
import { React, useState, useMemo, useCallback } from "react";
export default function TestPage() {
const [data, updateData] = useState(1);
const getComplicatedValue = useMemo(() => {
console.log("開始計算一個復(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>一個專門用于vue測試的頁面</div>
<div>這是一個復(fù)雜函數(shù)計算出來的值{getComplicatedValue}</div>
<div>這是一個簡簡單單的data值{data}</div>
<button onClick={changeData}>點擊我改變data值</button>
</div>
);
}
第四行把getComplicatedValue函數(shù)用useMemo包裹起來。第18行刪除()，因為剛剛已經(jīng)說過，useMemo返回的是一個值而不是函數(shù)。
接下來再看看頁面效果
這次可以看到，無論data值更新多少次，getComplicatedValue永遠只執(zhí)行了初始化的那一次。
來個首尾呼應(yīng)
基本使用
const memo = useMemo(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依賴項數(shù)組])如果依賴項數(shù)組里面的數(shù)據(jù)沒有變化，那么memo值永遠使用緩存，而不會重新計算
useCallback
useCallback比起useMemo就難上了一丟丟，因為涉及到了子組件。當然也是灰常簡單。
首先來看一個簡單
父組件
import { React, useState, useMemo, useCallback } from "react";
import TestSonComp from "./testSonComp";
export default function TestPage() {
const [data, updateData] = useState(1);
const getValue = () => {
console.log("我是父組件的一個函數(shù)");
};
const changeData = () => {
updateData((oldValue) => oldValue + 1);
};
return (
<div>
<div>一個專門用于vue測試的頁面</div>
<div>這是一個簡簡單單的data值{data}</div>
<button onClick={changeData}>點擊我改變data值</button>
<TestSonComp getValue={getValue} />
</div>
);
}
子組件
import { React, memo } from "react";
const TestSonComp = (props) => {
console.log("子組件render函數(shù)執(zhí)行了");
return <div>一個子組件</div>;
};
export default TestSonComp;
頁面顯示正常，然后點擊按鈕更新數(shù)據(jù)
那么此時問題又出現(xiàn)了，我就是在父組件中改了一下data值，data值導(dǎo)致父組件render重新執(zhí)行，render生成了一個新的getValue函數(shù)，然后子組件props更新，導(dǎo)致子組件更新。那么有沒有一個方法可以把函數(shù)緩存起來呢？
useCallback閃亮登場。
直接改寫父組件定義函數(shù)的一行
const getValue = useCallback(() => {
console.log("我是父組件的一個函數(shù)");
}, []);
改完之后看頁面效果你依然會發(fā)現(xiàn)和上圖一樣，子組件依然會更新！
問題出在這
useCallback必須配合React.memo來使用
react的Hooks組件對props的淺比較是在memo里面比較的（類組件是在shouldComponentUpdate里面），如果沒有memo，那么你使用useCallback就沒有意義
怎么使用？
子組件直接改寫最后一行
export default memo(TestSonComp);
二話不說看效果
改寫成功
再來個溫故知新
基本使用
const callback = useCallback(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依賴項數(shù)組])如果依賴項數(shù)組里面的數(shù)據(jù)沒有變化，那么函數(shù)值也永遠使用緩存。
到此這篇關(guān)于React中useCallback useMemo使用方法快速精通的文章就介紹到這了,更多相關(guān)React useCallback useMemo內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案
最近在學(xué)習React的過程中遇到了路由跳轉(zhuǎn)后頁面不刷新的問題，本文就詳細的介紹一下解決方法，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-06-06
本文主要介紹了淺談React底層實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-07-07
解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問題,本文給大家分享解決方案，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了詳解React 16 中的異常處理的相關(guān)資料,React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發(fā)生在 UI 層的錯誤不會連鎖導(dǎo)致整個應(yīng)用程序崩潰；未被任何異常邊界捕獲的異常可能會導(dǎo)致整個 React 組件樹被卸載，需要的朋友可以參考下2017-07-07
眾所周知在React中,主要用到3種位運算符 —— 按位與、按位或、按位非,下面這篇文章主要給大家介紹了關(guān)于React源碼中的位運算技巧的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了使用react遍歷對象生成dom問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-07-07
這篇文章主要為大家介紹了React?Fiber構(gòu)建源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
現(xiàn)在最熱門的前端框架，毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情，文中介紹的非常詳細，對大家具有一定參考學(xué)習價值，需要的朋友們下面來一起看看吧。2017-07-07