当前位置: 首页 > 工具软件 > memo > 使用案例 >

让我们来看看React.memo

公瑞
2023-12-01

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导致了状态行为重新定义,就

 类似资料: