React基础之React.memo

允许组件在props没有改变的情况下跳过渲染

React渲染的机制是:只要父组件重新渲染,子组件就会跟着重新渲染,如果子组件不需要进行重新更新,此时就会存在资源浪费

const xxx=memo(

)

import { memo, useMemo, useReducer, useState } from "react";

//使用memo进行缓存

const MemoSon=memo(

function Son(){

console.log('子组件要重新渲染啦');

return <div>this is son</div>

}

)

function reducer(state,action){

return state+1

}

function App() {

const [state,dispatch]=useReducer(reducer,0)

return (

<div className="App">

<button onClick={()=>{dispatch()}}>{state}++</button>

<MemoSon/>

</div>

);

}

export default App;

此时,点击按钮改变父组件,子组件也不会发生改变


比较机制

机制:使用memoe缓存组件之后,React会对每一个prop使用Object.is比较新值与老值,返回为true,就是没有发生变化

当传入的值为简单类型的时候,如果其发生变化,那么组件就会重新渲染,如果不发生变化,组件就不会重新渲染

当简单类型的值发生变化时

import { memo, useMemo, useReducer, useState } from "react";

//使用memo进行缓存

const MemoSon=memo(

function Son({count}){

console.log('子组件要重新渲染啦');

return <div>this is son{count}</div>

}

)

function App() {

const [count,setCount]= useState(0)

const num=100

return (

<div className="App">

<button onClick={()=>{setCount(count+1)}}>count++</button>

<MemoSon count={count}/>

</div>

);

}

export default App;

因此这里传入的count会发生变化,所以说子组件会重新渲染

如果我们传入的简单类型不会发生变化

import { memo, useMemo, useReducer, useState } from "react";

//使用memo进行缓存

const MemoSon=memo(

function Son({count}){

console.log('子组件要重新渲染啦');

return <div>this is son{count}</div>

}

)

function App() {

const [count,setCount]= useState(0)

const num=100

return (

<div className="App">

<button onClick={()=>{setCount(count+1)}}>count++</button>

<MemoSon count = { num } />

</div>

);

}

export default App;

组件就不会重新渲染

当传递的是一个引用类型的props,此时比较的就是新值与旧值是否相等

import { memo, useMemo, useReducer, useState } from "react";

//使用memo进行缓存

const MemoSon=memo(

function Son({list}){

console.log('子组件要重新渲染啦');

return <div>this is son{list}</div>

}

)

function App() {

const [count,setCount]= useState(0)

const list=[1,2,3]

return (

<div className="App">

<button onClick={()=>{setCount(count+1)}}>count++</button>

<MemoSon list={list}/>

</div>

);

}

export default App;

因为传入的props时引用类型,当父组件因为按钮发生变化的时候,会产生新的数组类型,所以说子组件中的props每次都会发生变化

但是如果存储引用类型不发生改变,不需要引起子组件的重新渲染的话,我们可以使用useMeno来修饰变量

import { memo, useMemo, useReducer, useState } from "react";

//使用memo进行缓存

const MemoSon=memo(

function Son({list}){

console.log('子组件要重新渲染啦');

return <div>this is son{list}</div>

}

)

function App() {

const [count,setCount]= useState(0)

const list = useMemo (() => {

return [ 1 , 2 , 3 ]

},[])

return (

<div className="App">

<button onClick={()=>{setCount(count+1)}}>count++</button>

<MemoSon list={list}/>

</div>

);

}

export default App;

此时,就算父组件发生变化,这里的数组不会发生变化,所以说不会引起子组件发生变化

相关推荐
excel1 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子30 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑33 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了34 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆40 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack