- 使用 useMemo 缓存数据 (类似 vue 的 computed)
- 使用 useCallback 缓存函数
- 异步组件 ( lazy )
- 路由懒加载( lazy )
- 服务器渲染 SSR
- 用 CSS 模拟 v-show

- 循环渲染添加 key
- 使用 Fragment (空标签)减少层级

- 不在JSX 中定义函数(每次状态变化,都会重新渲染 JSX,若在JSX 中定义函数,则会不断创建新函数,损耗性能)

- 在构造函数中 bind this (若在其他地方bind,在更新渲染时,会重复执行,损耗性能)

- 使用 shouldcomponentUpdate
- 使用 shouldComponentUpdate 判断组件是否要更新
- 或者使用 React.PureComponent
- 函数组件使用 React.memo
React 性能优化
朝阳392024-08-11 23:54
相关推荐
Ruihong1 天前
Vue withDefaults 转 React:VuReact 怎么处理?用户298698530141 天前
在 React 中使用 JavaScript 将 Excel 转换为 SVG小林攻城狮2 天前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题前端缘梦2 天前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)张元清2 天前
React useIntersectionObserver Hook:懒加载与可见性检测(2026)用户298698530142 天前
在 React 中使用 JavaScript 将 Excel 转换为 PDF木木剑光2 天前
我开源了一个 React 组件库,沉淀了多个高频组件和实用 HooksCsvn2 天前
React 19 `use()` 来了:以后数据加载可以不用 useEffect?许我半盏清茶2 天前
前端路由:理解 hash 路由和 history 路由原理