React中memo useCallback useMemo方法作用及使用場(chǎng)景
memo()、useCallback()、useMemo()使用場(chǎng)景
當(dāng)父組件的props或state變化時(shí)，render重新渲染，但傳遞給子組件的props沒(méi)有發(fā)生變化說(shuō)著只是簡(jiǎn)單調(diào)用了一下子組件，這時(shí)子組件也要重新渲染，這就導(dǎo)致了組件的不必要的渲染
React.memo()
當(dāng)父組件只是簡(jiǎn)單調(diào)用子組件，并未給子組件傳遞任何屬性，我們可以通過(guò)memo來(lái)控制函數(shù)組件的渲染
React.memo()將組件作為函數(shù)(memo)的參數(shù)，函數(shù)的返回值(Child)是一個(gè)新的組件。
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}>點(diǎn)擊次數(shù)：{count}</button>
<Child />
</div>
);
};
import {memo} from 'react'
export const Child=memo(()=>{
consloe.log('渲染了')
return <div>子組件</div>
})
//使用memo()包裹后的組件，在Parent組件重新渲染更新時(shí)，Child組件并沒(méi)有重新渲染更新
當(dāng)我們傳值給子組件時(shí)，這時(shí)使用memo函數(shù)就對(duì)控制組件的更新不起作用了
父組件
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}>點(diǎn)擊次數(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é)果的原因：
點(diǎn)擊父組件按鈕時(shí)，改變了父組件的count，導(dǎo)致父組件重新渲染
父組件重新渲染時(shí)，重新創(chuàng)建了onClick函數(shù)，導(dǎo)致傳遞給子組件的onClick屬性發(fā)生了變化，導(dǎo)致子組件重新渲染
如果傳遞給子組件的只有基本數(shù)據(jù)類型將不會(huì)重新渲染
注意: 如果直接使用useState解構(gòu)的setName傳給子組件, 子組件將不會(huì)重復(fù)渲染，因?yàn)榻鈽?gòu)出來(lái)的是一個(gè)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í)，緩存參數(shù)和計(jì)算結(jié)果，再次調(diào)用這個(gè)函數(shù)時(shí)，如果第二個(gè)參數(shù)依賴項(xiàng)沒(méi)有發(fā)生改變，則直接返回緩存結(jié)果，不會(huì)重新渲染
const onClick = useCallback((name: string) => {
setName(name);
}, []);
return (
<div>
<button onClick={increment}>點(diǎn)擊次數(shù)：{count}</button>
<Child name={name} onClick={onClick} />
</div>
);
};
但當(dāng)我們傳遞的屬性name不字符串，而是對(duì)象時(shí)
父組件
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}>點(diǎn)擊次數(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>
</>
);
}
);
點(diǎn)擊父組件count，看到子組件每次都重新渲染了。 分析原因跟調(diào)用函數(shù)是一樣的：
- 點(diǎn)擊父組件按鈕，觸發(fā)父組件重新渲染；
- 父組件渲染，
const userInfo = { name: "小明", age: 18 };一行會(huì)重新生成一個(gè)新對(duì)象，導(dǎo)致傳遞給子組件的 userInfo 屬性值變化，進(jìn)而導(dǎo)致子組件重新渲染。 - 注意: 如果使用
useState解構(gòu)的userInfo, 子組件將不會(huì)重復(fù)渲染，因?yàn)榻鈽?gòu)出來(lái)的是一個(gè)memoized 值。
這時(shí)我們使用 React.useMemo() useMemo(() => fn, dep)
React.useMemo()
useMemo()返回的是一個(gè) memoized 值。
如果沒(méi)有提供依賴項(xiàng)數(shù)組，useMemo 在每次渲染時(shí)都會(huì)計(jì)算新的值。
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}>點(diǎn)擊次數(shù)：{count}</button>
<Child userInfo={userInfo} />
</div>
);
};
對(duì)比useCallback() 和useMemo()
useCallback(fn, deps) 返回該回調(diào)函數(shù)的memoized回調(diào)函數(shù)
const onClick = useCallback((name: string) => {
setName(name);
}, []);
useMemo(() => fn, dep) 返回的是一個(gè) memoized 值。
const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);以上就是React中memo useCallback useMemo方法作用及使用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于React useCallback useMemo的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式
- 詳解React中的useMemo和useCallback的區(qū)別
- 深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
- React中useCallback useMemo使用方法快速精通
- React中useCallback useMemo到底該怎么用
- React源碼分析之useCallback與useMemo及useContext詳解
- 解析React中useMemo與useCallback的區(qū)別
- react性能優(yōu)化useMemo與useCallback使用對(duì)比詳解
- React?正確使用useCallback?useMemo的方式
- React中useMemo、useCallback的具體使用
相關(guān)文章
react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能
這篇文章主要介紹了react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了React?的數(shù)據(jù)流和生命周期,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
React高級(jí)特性Context萬(wàn)字詳細(xì)解讀
React的context就是一個(gè)全局變量，可以從根組件跨級(jí)別在React的組件中傳遞。React context的API有兩個(gè)版本，React16.x之前的是老版本的context，之后的是新版本的context2022-11-11
create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決
這篇文章主要介紹了create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
react虛擬列表實(shí)現(xiàn)及原理小結(jié)
React虛擬列表是前端性能優(yōu)化的核心技術(shù)之一,尤其在需要渲染上萬(wàn)條數(shù)據(jù)的表格或列表時(shí)很關(guān)鍵,下面就來(lái)介紹一下react虛擬列表的實(shí)現(xiàn),感興趣的可以了解一下2025-09-09
React實(shí)現(xiàn)隨機(jī)顏色選擇器的示例代碼
顏色選擇器是一個(gè)用于選擇和調(diào)整顏色的工具,它可以讓用戶選擇他們喜歡的顏色,本文主要介紹了React實(shí)現(xiàn)隨機(jī)顏色選擇器的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
React中實(shí)現(xiàn)組件通信的幾種方式小結(jié)
在構(gòu)建復(fù)雜的React應(yīng)用時(shí),組件之間的通信是至關(guān)重要的,從簡(jiǎn)單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認(rèn)識(shí)react組件通信的幾種方式,需要的朋友可以參考下2024-04-04
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來(lái)架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了React實(shí)踐之Tree組件的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03