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

相关推荐
WYiQIU15 小时前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
Bigger18 小时前
🎨 用一次就爱上的图标定制体验:CustomIcons 实战
前端·react.js·icon
weixin79893765432...1 天前
React + Fastify + DeepSeek 实现一个简单的对话式 AI 应用
人工智能·react.js·fastify
用户600071819101 天前
【翻译】使用 React 19 操作构建可复用组件
react.js
禁止摆烂_才浅1 天前
Taro 小程序页面返回传参完整示例
react.js·微信小程序·taro
还是大剑师兰特1 天前
React面试题及详细答案150道(51-60)
react.js·react面试题·大剑师
10share1 天前
React组件间通信
react.js
是一碗螺丝粉1 天前
React Native 运行时深度解析
前端·react native·react.js
骑自行车的码农1 天前
🍂 React DOM树的构建原理和算法
javascript·算法·react.js
前端老宋Running2 天前
一次从“卡顿地狱”到“丝般顺滑”的 React 搜索优化实战
前端·react.js·掘金日报