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

相关推荐
李明卫杭州4 小时前
Vue3 响应式概念 ↔ React 对应方案(类组件与函数组件)对照笔记
前端·vue.js·react.js
半个落月4 小时前
React useEffect 详解:执行时机、依赖数组与副作用清理
react.js
tntxia5 小时前
React 的常用 Hook
react.js
半夜里咳嗽的狼11 小时前
用 React 19.2 Activity 保留页面状态前,先弄清 hidden 模式做了什么
react.js
小林ixn11 小时前
React + TypeScript 实战:从“类型体操”到“数据持久化”,一次讲透组件通信与副作用管理
前端·react.js·typescript
何时梦醒11 小时前
React + TypeScript 企业级开发实战:从零搭建到组件架构演进
前端·react.js·全栈
张元清11 小时前
React useUpdateEffect Hook:跳过首次渲染(2026)
javascript·react.js
不好听61311 小时前
从困惑到理解:React 父子组件通信的三种写法
react.js·typescript
无人生还11 小时前
从 Vue3 到 React · 快速上手系列第 7 篇:副作用与生命周期 —— watch/watchEffect 如何翻译为 useEffect
前端·vue.js·react.js
阿黎梨梨11 小时前
React + TypeScript 入门:从组件类型到数据流设计
react.js