React.memo函數(shù)中的參數(shù)示例詳解
React.memo？這是個啥？
按照官方文檔的解釋：
如果你的函數(shù)組件在給定相同 props 的情況下渲染相同的結(jié)果，那么你可以通過將其包裝在 React.memo 中調(diào)用，以此通過記憶組件渲染結(jié)果的方式來提高組件的性能表現(xiàn)。這意味著在這種情況下，React 將跳過渲染組件的操作并直接復用最近一次渲染的結(jié)果。
官方文檔????(React 頂層 API – React (reactjs.org))
個人淺見：
每一次狀態(tài)的更新都會導致整個組件的重復渲染，而React.memo可以避免與這次狀態(tài)更新原因無關組件的重復渲染。如果還不是很懂，沒關系，下面的demo肯定能讓你明白
React.memo的第一個參數(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í)行過了嗎？而且我本來就是好好的，為啥我要因為你(父組件)的變化而重新執(zhí)行？？我不服?。?/p>
哦吼，情況不妙，要吵起來了。。。
????俗話說：有問題來調(diào)節(jié)，來調(diào)節(jié)沒問題
這時React.memo金牌調(diào)節(jié)官來了~~
React.memo優(yōu)化
調(diào)節(jié)官：來來來，子組件呀，我把我的React.memo給你，絕對讓父組件變得老老實實的。
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的第二個參數(shù)
很多人知道了memo第一個參數(shù)的威力后，就往往把它第二個參數(shù)忽略了
上一個案例是父組件狀態(tài)的更新與子組件無關，用React.memo 進行緩存渲染，故不更新子組件
那么父組件狀態(tài)的更新與子組件有關，就一定要更新嗎？
啊嘞啊嘞~~什么鬼？
那么我們再拿個表單的刻度滑動舉例看看吧
父組件
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!!難道每拖動一個地方就要重新渲染嗎？這不是更降低性能嗎？
這就到了我們React.memo大顯身手的時候了??！
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) => {
// 將上一個刻度與下一個刻度進行比較，如果返回值相同，則不會進行更新
// 上一個刻度的返回值
const prevValueClass = setSatisfactionClass(prevValue.level);
// 下一個刻度的返回值
const nextValueClass = setSatisfactionClass(nextValue.level);
return prevValueClass === nextValueClass
}
export default React.memo(SonComponent,isSameRange)
結(jié)果
直接把表單分成了三個區(qū)域，0-100,100-200,200-300，如果僅僅是在同一個區(qū)域里面做拖動，子組件不會進行額外的渲染
小結(jié)
**React.memo() 第一個參數(shù)是要包裹的組件**
**第二個參數(shù)為前后props的值的比較方式**
1. 默認情況下，只會對復雜對象做淺層對比，即僅僅使用React.memo的第一個參數(shù)
2. 如果想要控制對比過程，那么可以自定義比較函數(shù)，通過第二個參數(shù)傳入來實現(xiàn)
以上就是React.memo函數(shù)中的參數(shù)示例詳解的詳細內(nèi)容，更多關于React.memo函數(shù)參數(shù)的資料請關注腳本之家其它相關文章！
相關文章
React中的Refs提供了一種方式，允許我們訪問DOM節(jié)點或在render方法中創(chuàng)建的React元素，本文給大家介紹react refs的相關知識，感興趣的朋友一起看看吧2021-07-07
React 的 getDefaultProps簡介、用法與最佳實踐方案
React組件通過getDefaultProps設置默認屬性,防止未傳props導致的錯誤,隨著React發(fā)展,方式從方法演變?yōu)閟tatic defaultProps及函數(shù)參數(shù)默認值,建議根據(jù)項目選擇合適語法,本文給大家介紹React 的 getDefaultProps簡介、用法與最佳實踐方案,感興趣的朋友跟隨小編一起看看吧2025-09-09
這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了React?Fiber?樹思想解決業(yè)務實際場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了深入研究React中setState源碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了解讀react的onClick自動觸發(fā)等相關問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
剛好手上有一個要實現(xiàn)文字跑馬燈的react項目，然后ant-design上面沒有這個組件，于是只能自己手擼一個，文中的實現(xiàn)方法講解詳細，希望對大家有所幫助2023-01-01
本文主要介紹了react實現(xiàn)圖片懶加載的三種方式,包括利用瀏覽器原生的loading="lazy"屬性,使用react-lazyload庫以及通過IntersectionObserver API手動實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2025-03-03
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06