打造高性能的react

根本目的就是减少重复渲染

使用使用 shouldComponentUpdate 规避冗余的更新逻辑

shouldComponentUpdate触发的条件是只要父组件更新了,就会被触发,在里面判断传入的pros是否改变,

不变则返回false

PureComponent + Immutable.js

PureComponent其实就是内置了对shouldComponentUpdate的实现,不过其对props的比对是浅比较,

基本数据类型会判断其是否相等,引用数据类型会判断其对象地址是否变化,带来的问题就是,引用数据类型

内置的数据变化了,但是却没有更新或者是引用类型数据不变但是其地址变化了,触发不必要的更新。

为了解决这类问题,引入了Immutablejs,持久性数据的库,只要这个数据被创造出来,就不能被更改,更改的话就会返回一个新对象

React.memo 与 useMemo

memo是函数版的shouldComponentUpdate,第二个参数就是shouldComponentUpdate,在里面对比props,

不传入的时候就是类似PureComponent,进行浅比较

useMemo其实就是更细致话的memo,React.memo 控制是否需要重渲染一个组件,而 useMemo 控制的则是是否需要重复执行某一段逻辑

相关推荐
哈__4 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-device-info
javascript·react native·react.js
庄小焱4 小时前
React——React基础语法(2)
前端·javascript·react.js
大雷神4 小时前
HarmonyOS APP<玩转React>开源教程十五:首页完整实现
react.js·开源·harmonyos
yzin6 小时前
【源码】【react】useCallback、useMemo、memo 原理
前端·react.js
Neptune16 小时前
让我带你迅速吃透React组件通信:从入门到精通(中篇)
前端·react.js·面试
弓.长.6 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-webview — 网页渲染组件
react native·react.js·harmonyos
Highcharts.js7 小时前
React 如何实现大数据量图表(性能优化指南)
前端·javascript·react.js·信息可视化·集成·highcharts
旭久7 小时前
web前端开发好物推荐-(code-inspector-plugin/react-dev-inspector)页面快捷定位代码位置
前端·react.js·前端框架
弓.长.7 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:@react-native-picker
react native·react.js·harmonyos