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

相关推荐
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
今禾15 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
我想说一句15 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞15 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
爱编程的喵18 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
海底火旺18 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
G等你下课1 天前
你还在 import { Button } from './components'?
前端·react.js
挽淚1 天前
AI对话+React 项目实战(半成品)
javascript·react.js
PineappleCoder1 天前
React函数组件的"生活管家"——useEffect Hook详解
前端·react.js
G等你下课1 天前
React 中的 Diff 算法:理解虚拟 DOM 的高效更新机制
前端·react.js