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

相关推荐
FungLeo3 小时前
React 管理后台实战 · 前端请求层怎么写?401 静默刷新、token 并发竞争、强制改密拦截一次说清
前端·react.js·前端框架
AI砖家3 小时前
React Native 打包体积优化指南:在保证功能正常的前提下把包压到最小
javascript·react native·react.js·打包优化
BreezeJiang4 小时前
JWT 登录不是存个 token:React 鉴权真正要闭合的是一条数据流
javascript·react.js·axios
半个落月4 小时前
React 性能优化入门:用 memo 避免无关的子组件重复渲染
前端·react.js
用户9385156350716 小时前
React + JWT 登录鉴权底层原理与工程化实践
前端·react.js
张元清21 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
kisshyshy1 天前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js
产品设计大观1 天前
实测墨刀AI生成光伏储能管理后台,快速交付高保真界面和React源码
人工智能·react.js·墨刀
拾年2751 天前
前后端分离开发,别再"傻等"后端接口了——聊聊前端接口工程
前端·javascript·react.js