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

相关推荐
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端咸鱼陈2 小时前
React首屏优化实战:从10秒到2秒!极致性能提升方案揭秘(附Webpack5/SSR/代码分割)🔥
前端·react.js
程序员小续2 小时前
React 18 并发更新的工作原理与实战应用
前端·react.js·面试
500佰2 小时前
Cursor13个神功能 | AI代码补全质量远超预期
react.js·程序员
不能只会打代码4 小时前
六十天前端强化训练之第二十天React Router 基础详解
前端·react.js·前端框架·react router 基础
鱼樱前端19 小时前
从基础到深入的AST(Abstract Syntax Tree,抽象语法树)解析,结合前端框架(Vue/React)及实际应用场景的技术详解
javascript·vue.js·react.js
Cirrod21 小时前
react加antd封装表格单、多选组件,支持跨页选择缓存
javascript·react.js·缓存
爱看书的小沐1 天前
【小沐学Web3D】three.js 加载三维模型(React)
javascript·react.js·vue·webgl·three.js·opengl·web3d
xhuarui1 天前
React-Router-dom的二次封装,增加路由守卫等功能
前端·react.js
bysking1 天前
【25-qiankun】手写微前端qiankun集成react&vue子项目-bysking
react.js