此方法是一个React顶层Api方法,给函数组件来减少重复渲染,类似于PureComponent父和shouldComponentUpdate方法的集合体。
memo它是专门给函数组件用来减少子孙组件的非必要渲染
它是一个高阶组件
React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo
创建一个组件,当它的父组件重新渲染时,只要它的新 props 与旧 props 相同时,React 就不会重新渲染它。这样的组件被称为 记忆化的(memoized)组件。
此写法和类组件中的PureComponent功能是一样的
const Child = memo(({ num }) => {
//此时child只会打印一次,因为子组件中没有使用来自父组件中所传的值
//若父组件中向子组件传入数据,并且在子组件中使用了数据,则会在每次调用addNum时都打印child
console.log('child')
return (
<div>
<div>child组件</div>
</div>
)
})
const App = () => {
const [num, setNum] = useState(1)
const addNum = () => {
setNum(v => v + 1)
}
return (
<div>
<h3>{num}</h3>
<button onClick={addNum}>++++++</button>
<hr />
<Child />
</div>
)
}
----------------------------------------------------------------------
const Child = memo(
({ num }) => {
console.log('child')
return (
<div>
<div>child组件 - {num.value}</div>
</div>
)
},
// 回调函数的功能就相当于类组件中的shouldComponentUpdate作用
// prevProps修改前的props数据
// nextProps修改后的props数据
(prevProps, nextProps) => {
// console.log(prevProps, nextProps)
//如果要阻止渲染则返回true,继续渲染返回false
return isEqual(prevProps, nextProps)
//若两次值相等,则返回true,因此不会继续渲染,每次只打印app,不打印child
//若两次值相等,则返回false,因此会继续渲染,每次同时打印app和child
}
)
const App = () => {
const [num, setNum] = useState({ value: 1 })
console.log('app')
const addNum = () => {
setNum({ value: Date.now() })
}
return (
<div>
<h3>{num.value}</h3>
<button onClick={addNum}>++++++</button>
<hr />
<Child num={num} />
</div>
)
}