- 使用 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
相关推荐
拾年27511 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +拾年27512 小时前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞小林ixn12 小时前
在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 实战名字还没想好☜12 小时前
React 用 useEffect 做轮询实战:setInterval 拿到旧 state 的闭包陷阱与正确清理张元清18 小时前
React useLatest Hook:在异步回调里读到最新状态 (2026)光影少年19 小时前
react navite图片加载优化、大图卡顿、缓存策略To_OC1 天前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了Eloudy1 天前
ReAct 原理简介嘟嘟07172 天前
Next.js 博客左侧笔记列表是怎么从 Redis 渲染出来的?从组件、children 到动态路由一次讲清张元清2 天前
React useInterval Hook:没有过期闭包的 setInterval (2026)