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

相关推荐
qq_25249639962 分钟前
react 子组件暴露,父组件接收
前端·javascript·react.js
zwjapple37 分钟前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
前端大白话2 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
bigyoung2 小时前
使用 Arco Design 的 Table 组件实现可编辑列
前端·react.js·arco design
谦谦橘子2 小时前
手写react-router,理解react-router原理
前端·javascript·react.js
Aphasia3112 小时前
React 中ref的三种形式
前端·react.js
egghead263163 小时前
react常用hooks,超细~
react.js
张开心_kx3 小时前
面试官又问我是否了解React的单向数据流
前端·javascript·react.js
天狗精灵3 小时前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js
前端大白话3 小时前
React 必知!useLayoutEffect Hook 与 useEffect 的终极对决,DOM 操作和动画的秘密武器
前端·javascript·react.js