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

相关推荐
404_Not_Found111 小时前
用 react + ts 实现我的第一个 todoList
react.js
木春2 小时前
React入门:构建你的第一个应用
前端·react.js
吃奥特曼的饼干5 小时前
React useEffect 清理函数:别让依赖数组坑了你!
前端·react.js
随笔记6 小时前
react中函数式组件和类组件有什么区别?新建的react项目用函数式组件还是类组件?
前端·react.js·typescript
emojiwoo6 小时前
React 状态管理:useState 与 useDatePersistentState 深度对比
前端·javascript·react.js
D11_6 小时前
【React】JSX基础
前端·react.js·前端框架
晴空雨7 小时前
Zustand vs Redux Toolkit:现代 React 状态管理深度对比
前端·react.js
梨子同志7 小时前
React 组件
react.js
gaog2zh7 小时前
100202Title和Input组件_编辑器-react-仿低代码平台项目
react.js·低代码·编辑器
XiaoMu_0018 小时前
【Vue vs React:前端框架深度对比分析】
vue.js·react.js·前端框架