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

相关推荐
不会敲代码14 小时前
从入门到进阶:手写React自定义Hooks,让你的组件更简洁
前端·react.js
pe7er15 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
晚风予星17 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
青青家的小灰灰20 小时前
React 架构进阶:自定义 Hooks 的高级设计模式与最佳实践
前端·react.js·前端框架
yuki_uix2 天前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
牛奶2 天前
React 底层原理 & 新特性
前端·react.js·面试
牛奶2 天前
React 基础理论 & API 使用
前端·react.js·面试
小呆呆_小乌龟2 天前
同样是定义对象,为什么 TS 里有人用 interface,有人用 type?
前端·react.js
代码小学僧2 天前
为什么我推荐前端项目都应该使用 TanStack Query 管理接口请求
前端·react.js·axios
不会敲代码12 天前
React 受控组件与非受控组件完全指南
前端·react.js