允许组件在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;
此时，就算父组件发生变化，这里的数组不会发生变化，所以说不会引起子组件发生变化
