React.memo函數(shù)中的參數(shù)示例詳解
React.memo？這是個(gè)啥？
按照官方文檔的解釋：
如果你的函數(shù)組件在給定相同 props 的情況下渲染相同的結(jié)果，那么你可以通過將其包裝在 React.memo 中調(diào)用，以此通過記憶組件渲染結(jié)果的方式來提高組件的性能表現(xiàn)。這意味著在這種情況下，React 將跳過渲染組件的操作并直接復(fù)用最近一次渲染的結(jié)果。
官方文檔????(React 頂層 API – React (reactjs.org))
個(gè)人淺見：
每一次狀態(tài)的更新都會(huì)導(dǎo)致整個(gè)組件的重復(fù)渲染，而React.memo可以避免與這次狀態(tài)更新原因無關(guān)組件的重復(fù)渲染。如果還不是很懂，沒關(guān)系，下面的demo肯定能讓你明白
React.memo的第一個(gè)參數(shù)
就拿實(shí)際開發(fā)中常見的父子組件傳值來舉例：
父組件
import { useEffect,useState } from 'react';
import SonComponent from './SonComponent';
function App() {
const [satisfactionLevel,setSatisfactionLevel] = useState(100);
console.log('App 更新了');
useEffect(() => {
setTimeout(() => {
setSatisfactionLevel(150)
},3000)
},[])
return (
<div className="App">
{satisfactionLevel}
<SonComponent />
</div>
)
}
export default App
子組件
import React from 'react'
function SonComponent() {
console.log('SonComponent 更新了');
return (
<div>
SonComponent
</div>
)
}
export default SonComponent
父組件：我自身的satisfactionLevel狀態(tài)發(fā)生了變化，我得重新渲染一下
結(jié)果
子組件：我剛開始不是已經(jīng)執(zhí)行過了嗎？而且我本來就是好好的，為啥我要因?yàn)槟?父組件)的變化而重新執(zhí)行？？我不服??！
哦吼，情況不妙，要吵起來了。。。
????俗話說：有問題來調(diào)節(jié)，來調(diào)節(jié)沒問題
這時(shí)React.memo金牌調(diào)節(jié)官來了~~
React.memo優(yōu)化
調(diào)節(jié)官：來來來，子組件呀，我把我的React.memo給你，絕對(duì)讓父組件變得老老實(shí)實(shí)的。
import React from 'react'
function SonComponent() {
console.log('SonComponent 更新了');
return (
<div>
SonComponent
</div>
)
}
export default React.memo(SonComponent)
結(jié)果
可以發(fā)現(xiàn)在使用了React.memo后，可以使子組件避免無效的渲染，從而提高性能
React.memo的第二個(gè)參數(shù)
很多人知道了memo第一個(gè)參數(shù)的威力后，就往往把它第二個(gè)參數(shù)忽略了
上一個(gè)案例是父組件狀態(tài)的更新與子組件無關(guān)，用React.memo 進(jìn)行緩存渲染，故不更新子組件
那么父組件狀態(tài)的更新與子組件有關(guān)，就一定要更新嗎？
啊嘞啊嘞~~什么鬼？
那么我們?cè)倌脗€(gè)表單的刻度滑動(dòng)舉例看看吧
父組件
import { useEffect,useState } from 'react';
import SonComponent from './SonComponent';
function App() {
const [satisfactionLevel,setSatisfactionLevel] = useState(100);
// console.log('App 更新了');
useEffect(() => {
setTimeout(() => {
setSatisfactionLevel(150)
},3000)
},[])
return (
<div className="App">
<input type="range"
min='0'
max='300'
value={satisfactionLevel}
onChange={(event) => setSatisfactionLevel(+event.target.value)} />
{satisfactionLevel}
<SonComponent level={satisfactionLevel}/>
</div>
)
}
export default App
子組件
import React from 'react'
function SonComponent(props) {
console.log(`${props.level}`);
return (
<div>
SonComponent
</div>
)
}
export default React.memo(SonComponent)
結(jié)果
OMG!!難道每拖動(dòng)一個(gè)地方就要重新渲染嗎？這不是更降低性能嗎？
這就到了我們React.memo大顯身手的時(shí)候了?。?/p>
React.memo優(yōu)化
父組件
import { useEffect,useState } from 'react';
import SonComponent from './SonComponent';
function App() {
const [satisfactionLevel,setSatisfactionLevel] = useState(100);
// console.log('App 更新了');
useEffect(() => {
setTimeout(() => {
setSatisfactionLevel(150)
},3000)
},[])
return (
<div className="App">
<input type="range"
min='0'
max='300'
value={satisfactionLevel}
onChange={(event) => setSatisfactionLevel(+event.target.value)} />
{satisfactionLevel}
<SonComponent level={satisfactionLevel}/>
</div>
)
}
export default App
子組件
import React from 'react'
function SonComponent(props) {
console.log(`${props.level}`);
return (
<div>
SonComponent
</div>
)
}
const setSatisfactionClass = (level) => {
if (level < 100) {
return "bad";
}
if (level < 200) {
return "common";
}
if (level < 300) {
return "good";
}
}
const isSameRange = (prevValue, nextValue) => {
// 將上一個(gè)刻度與下一個(gè)刻度進(jìn)行比較，如果返回值相同，則不會(huì)進(jìn)行更新
// 上一個(gè)刻度的返回值
const prevValueClass = setSatisfactionClass(prevValue.level);
// 下一個(gè)刻度的返回值
const nextValueClass = setSatisfactionClass(nextValue.level);
return prevValueClass === nextValueClass
}
export default React.memo(SonComponent,isSameRange)
結(jié)果
直接把表單分成了三個(gè)區(qū)域，0-100,100-200,200-300，如果僅僅是在同一個(gè)區(qū)域里面做拖動(dòng)，子組件不會(huì)進(jìn)行額外的渲染
小結(jié)
**React.memo() 第一個(gè)參數(shù)是要包裹的組件**
**第二個(gè)參數(shù)為前后props的值的比較方式**
1. 默認(rèn)情況下，只會(huì)對(duì)復(fù)雜對(duì)象做淺層對(duì)比，即僅僅使用React.memo的第一個(gè)參數(shù)
2. 如果想要控制對(duì)比過程，那么可以自定義比較函數(shù)，通過第二個(gè)參數(shù)傳入來實(shí)現(xiàn)
以上就是React.memo函數(shù)中的參數(shù)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React.memo函數(shù)參數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語句問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react的渲染機(jī)制是非常獨(dú)特的,有別于 Vue 框架的渲染次數(shù)的優(yōu)化計(jì)算,React 很久以來就有PureComponent、shouldUpdate,本文小編給大家介紹了React渲染的優(yōu)化方案,需要的朋友可以參考下2024-08-08
React Native 啟動(dòng)流程詳細(xì)解析
這篇文章主要介紹了React Native 啟動(dòng)流程簡(jiǎn)析,文以 react-native-cli 創(chuàng)建的示例工程（安卓部分）為例，給大家分析 React Native 的啟動(dòng)流程，需要的朋友可以參考下2021-08-08
這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
ReactNative實(shí)現(xiàn)弧形拖動(dòng)條的代碼案例
本文介紹了ReactNative實(shí)現(xiàn)弧形拖動(dòng)條,本組件使用到了react-native-svg和PanResponder,結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
一文教會(huì)你用redux實(shí)現(xiàn)computed計(jì)算屬性
在computed中,可以定義一些屬性,即計(jì)算屬性,下面這篇文章主要給大家介紹了關(guān)于如何利用redux實(shí)現(xiàn)computed計(jì)算屬性的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了React組件性能最佳優(yōu)化實(shí)踐分享，React組件性能優(yōu)化的核心是減少渲染真實(shí)DOM節(jié)點(diǎn)的頻率，減少Virtual?DOM比對(duì)的頻率，更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了react如何利用懶加載減少首屏加載時(shí)間，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React修改數(shù)組對(duì)象的注意事項(xiàng)及說明
這篇文章主要介紹了React修改數(shù)組對(duì)象的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React語法中設(shè)置TS校驗(yàn)規(guī)則的步驟詳解
這篇文章主要給大家介紹了React語法中如何設(shè)置TS校驗(yàn)規(guī)則,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10