React中memo useCallback useMemo方法作用及使用場景
memo()、useCallback()、useMemo()使用場景
當(dāng)父組件的props或state變化時，render重新渲染，但傳遞給子組件的props沒有發(fā)生變化說著只是簡單調(diào)用了一下子組件，這時子組件也要重新渲染，這就導(dǎo)致了組件的不必要的渲染
React.memo()
當(dāng)父組件只是簡單調(diào)用子組件，并未給子組件傳遞任何屬性，我們可以通過memo來控制函數(shù)組件的渲染
React.memo()將組件作為函數(shù)(memo)的參數(shù)，函數(shù)的返回值(Child)是一個新的組件。
import { useState } from "react";
import { Child } from "./child";
export const Parent = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<button onClick={increment}>點擊次數(shù)：{count}</button>
<Child />
</div>
);
};
import {memo} from 'react'
export const Child=memo(()=>{
consloe.log('渲染了')
return <div>子組件</div>
})
//使用memo()包裹后的組件，在Parent組件重新渲染更新時，Child組件并沒有重新渲染更新
當(dāng)我們傳值給子組件時，這時使用memo函數(shù)就對控制組件的更新不起作用了
父組件
import { useState } from "react";
import { Child } from "./child";
export const Parent = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState("小明");
const increment = () => setCount(count + 1);
const onClick = (name: string) => {
setName(name);
};
return (
<div>
<button onClick={increment}>點擊次數(shù)：{count}</button>
<Child name={name} onClick={onClick} />
</div>
);
};
子組件
import { memo } from "react";
export const Child = memo(
(props: { name: string; onClick: (value: any) => void }) => {
const { name, onClick } = props;
console.log("渲染了", name, onClick);
return (
<>
<div>子組件</div>
<button onClick={() => onClick("小紅")}>改變 name 值</button>
</>
);
}
);
出現(xiàn)這樣結(jié)果的原因：
點擊父組件按鈕時，改變了父組件的count，導(dǎo)致父組件重新渲染
父組件重新渲染時，重新創(chuàng)建了onClick函數(shù)，導(dǎo)致傳遞給子組件的onClick屬性發(fā)生了變化，導(dǎo)致子組件重新渲染
如果傳遞給子組件的只有基本數(shù)據(jù)類型將不會重新渲染
注意: 如果直接使用useState解構(gòu)的setName傳給子組件, 子組件將不會重復(fù)渲染，因為解構(gòu)出來的是一個memoized 函數(shù)。
React.useCallback()
所以，在這種情況下我們使用React.useCallback() useCallback(fn, deps)
import { useCallback, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState("小明");
const increment = () => setCount(count + 1);
//使用useCallback鉤子包裹的回調(diào)函數(shù)是memoized函數(shù)，他初次調(diào)用該函數(shù)時，緩存參數(shù)和計算結(jié)果，再次調(diào)用這個函數(shù)時，如果第二個參數(shù)依賴項沒有發(fā)生改變，則直接返回緩存結(jié)果，不會重新渲染
const onClick = useCallback((name: string) => {
setName(name);
}, []);
return (
<div>
<button onClick={increment}>點擊次數(shù)：{count}</button>
<Child name={name} onClick={onClick} />
</div>
);
};
但當(dāng)我們傳遞的屬性name不字符串，而是對象時
父組件
import { useCallback, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
const [count, setCount] = useState(0);
// const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
const increment = () => setCount(count + 1);
const userInfo = { name: "小明", age: 18 };
return (
<div>
<button onClick={increment}>點擊次數(shù)：{count}</button>
<Child userInfo={userInfo} />
</div>
);
};
子組件
import { memo } from "react";
export const Child = memo(
(props: { userInfo: { name: string; age: number } }) => {
const { userInfo } = props;
console.log("渲染了", userInfo);
return (
<>
<div>名字： {userInfo.name}</div>
<div>年齡：{userInfo.age}</div>
</>
);
}
);
點擊父組件count，看到子組件每次都重新渲染了。 分析原因跟調(diào)用函數(shù)是一樣的：
- 點擊父組件按鈕，觸發(fā)父組件重新渲染；
- 父組件渲染，
const userInfo = { name: "小明", age: 18 };一行會重新生成一個新對象，導(dǎo)致傳遞給子組件的 userInfo 屬性值變化，進而導(dǎo)致子組件重新渲染。 - 注意: 如果使用
useState解構(gòu)的userInfo, 子組件將不會重復(fù)渲染，因為解構(gòu)出來的是一個memoized 值。
這時我們使用 React.useMemo() useMemo(() => fn, dep)
React.useMemo()
useMemo()返回的是一個 memoized 值。
如果沒有提供依賴項數(shù)組，useMemo 在每次渲染時都會計算新的值。
import { useMemo, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
const [count, setCount] = useState(0);
// const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
const increment = () => setCount(count + 1);
const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);
return (
<div>
<button onClick={increment}>點擊次數(shù)：{count}</button>
<Child userInfo={userInfo} />
</div>
);
};
對比useCallback() 和useMemo()
useCallback(fn, deps) 返回該回調(diào)函數(shù)的memoized回調(diào)函數(shù)
const onClick = useCallback((name: string) => {
setName(name);
}, []);
useMemo(() => fn, dep) 返回的是一個 memoized 值。
const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);以上就是React中memo useCallback useMemo方法作用及使用場景的詳細(xì)內(nèi)容，更多關(guān)于React useCallback useMemo的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react-router-dom 嵌套路由的實現(xiàn)
這篇文章主要介紹了react-router-dom 嵌套路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了antd form表單如何處理自定義組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了react+antd.3x實現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在React中,要實現(xiàn)一個組件表格并且固定底部,可以使用CSS的固定定位或絕對定位來實現(xiàn),下面通過示例代碼給大家分享react 組件表格固定底部的實現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-03-03
自定義組件的時候往往需要傳?children,由于寫法比較多樣,我就總結(jié)了一下,要自定義的組件其中包含一個?title?和一個?children,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
react-navigation之動態(tài)修改title的內(nèi)容
這篇文章主要介紹了react-navigation之動態(tài)修改title的內(nèi)容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了React18中的useDeferredValue的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
解析React中useMemo與useCallback的區(qū)別
這篇文章主要介紹了React中useMemo與useCallback的區(qū)別,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08