打造高性能的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 控制的则是是否需要重复执行某一段逻辑

相关推荐
空中海2 小时前
04 工程化、质量体系与 React 生态
前端·ubuntu·react.js
空中海2 小时前
03 性能、动画与 React Native 新架构
react native·react.js·架构
空中海3 小时前
02 React Native状态、导航、数据流与设备能力
javascript·react native·react.js
空中海4 小时前
04 React Native工程化、质量、发布与生态选型
javascript·react native·react.js
郑生zs7 小时前
Hooks-useEffect
react.js
光影少年7 小时前
react函数组件、类组件、纯组件、受控/非受控组件
前端·react.js·掘金·金石计划
空中海8 小时前
05 React Native架构设计、主线项目与专家实践
javascript·react native·react.js
killerbasd18 小时前
还是迷茫 5.3
前端·react.js·前端框架
江南十四行1 天前
ReAct Agent 基本理论与项目实战(一)
前端·react.js·前端框架
谢尔登1 天前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js