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

相关推荐
2601_949593651 小时前
基础入门 React Native 鸿蒙跨平台开发:Animated 动画按钮组件 鸿蒙实战
react native·react.js·harmonyos
●VON2 小时前
React Native for OpenHarmony:ScrollView 事件流、布局行为与性能优化深度剖析
学习·react native·react.js·性能优化·openharmony
2601_949593653 小时前
高级进阶 React Native 鸿蒙跨平台开发:LinearGradient 玻璃拟态卡片
react native·react.js·harmonyos
摘星编程3 小时前
在OpenHarmony上用React Native:TopTab顶部标签页
react native·react.js·harmonyos
Swift社区3 小时前
Nginx 反向代理配置 React 前端与 Python 后端
前端·nginx·react.js
摘星编程3 小时前
用React Native开发OpenHarmony应用:NativeStack原生导航
javascript·react native·react.js
●VON4 小时前
从像素到语义:React Native Text 组件在 OpenHarmony 上的渲染哲学与工程实现
android·react native·react.js
霁月的小屋4 小时前
React 闭包陷阱深度解析
前端·javascript·react.js
2601_949593654 小时前
高级进阶 React Native 鸿蒙跨平台开发:SafeAreaView 沉浸式页面布局
react native·react.js·harmonyos
●VON4 小时前
React Native for OpenHarmony:Image 组件的加载、渲染与性能优化全解析
笔记·学习·react native·react.js·性能优化·openharmony