[JavaScript知识库]让我们来看看React.memo

React.memo的使用背景

关于这个使用和使用背景，网上是有清晰的答案的。前提是通常情况下props发生改变时，react就会re-render。也就是说当你的子组件不想被父组件影响重新渲染时，你就需要给子组件一个react.memo包裹起来，使其当props发生改变时 才会re-render。但是什么时候才使用它呢，是不是所有子组件都要使用它，网上没有很清晰的答案。笔者以下将会做出自己的总结。

react.memo

能减少重绘次数，把组件传入的props做一个lodash缓存，每次会做一个浅比较，当props改变时，会与缓存的内容做一个浅比较(当然浅比较也是要消费性能的，memo还是要慎用)也就是说当传入的值时useState定义的内容（useState 是不会在每次重新渲染时都重新初始化的，只有在组件重载时才会初始化，所以引用地址一样），数值，字符串，布尔值时，能避免不必要的re-render。但是因为做了浅比较，这又产生了一个问题。react.memo不生效的情况。

注：react 内部流程，其实跟vue差不多只不过没有双向数据流绑定的这个过程：Data->component->VDOM->DOM
memo比较的其实时虚拟dom,这个过程相对于re-render非常快，所以不用担心效率问题，能很好的阻止页面无效重绘重排

react.memo不生效的情况

复杂数据类型当比较到存储地址不一致时，因为父组件的重新render导致了状态行为重新定义，就

开通VIP 解锁文章