作用:允许组件在Props没有改变的情况下跳过渲染
React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
//1.验证默认的渲染机制 子跟着父一起渲
//2.memo函数进行缓存
import {memo, useState } from 'react'
const MemoSon = memo(function Son() {
console.log('子组件被重新渲染了')
return <div>this is son</div>
})
function App() {
const [count, setCount] = useState(0)
// console.log('父组件重新渲染了')
return (
<div className='App'>
<button onClick={()=>setCount(count + 1)}>+{count}</button>
{/* <Son /> */}
<MemoSon/>
</div>
)
}
export default App
props比较机制: 在使用memo缓存组件之后,React会对每一个 prop 使用 Object.is 比较新值和老值,返回true,表示没有变化
prop是简单类型 Object.is(3, 3) => true 没有变化
//1.传递一个简单类型的props,党prop变化时组件重新渲染
import {memo, useState } from 'react'
const MemoSon = memo(function Son({count}) {
console.log('子组件被重新渲染了')
return <div>this is son{count}</div>
})
function App() {
const [count, setCount] = useState(0)
// // console.log('父组件重新渲染了')
return (
<div className='App'>
<MemoSon count={count}/>
//当count发生变化,则不会变化
<button onClick={()=>setCount(count+1)}>change</button>
</div>
)
}
export default App
prop是引用类型(对象 / 数组) Object([], []) => false 有变化,React只关心引用是否变化
//2.传递一个引用类型的prop,比较是新值和旧值是否相等
import {memo, useState } from 'react'
const MemoSon = memo(function Son({count}) {
console.log('子组件被重新渲染了')
return <div>this is son{list}</div>
})
const list = [1,2,3]
function App() {
const [count, setCount] = useState(0)
// // console.log('父组件重新渲染了')
return (
<div className='App'>
<MemoSon list={list}/>
<button onClick={()=>setCount(count+1)}>change</button>
</div>
)
}
export default App
保持稳定引用:
//3.保持引用稳定--useMemo
const list = useMemo(()=>{
return [1,2,3]
},[])