React 性能优化

  • 使用 useMemo 缓存数据 (类似 vue 的 computed)
  • 使用 useCallback 缓存函数
  • 异步组件 ( lazy )
  • 路由懒加载( lazy )
  • 服务器渲染 SSR
  • 用 CSS 模拟 v-show
  • 循环渲染添加 key
  • 使用 Fragment (空标签)减少层级
  • 不在JSX 中定义函数(每次状态变化,都会重新渲染 JSX,若在JSX 中定义函数,则会不断创建新函数,损耗性能)
  • 在构造函数中 bind this (若在其他地方bind,在更新渲染时,会重复执行,损耗性能)
  • 使用 shouldcomponentUpdate
    • 使用 shouldComponentUpdate 判断组件是否要更新
    • 或者使用 React.PureComponent
    • 函数组件使用 React.memo
相关推荐
酒尘&5 小时前
Hook学习-上篇
前端·学习·react.js·前端框架·react
GISer_Jing11 小时前
React Native 2025:从零到精通实战指南
javascript·react native·react.js
酒尘11 小时前
React交互学习篇
react.js
KKKK11 小时前
一次React19.2 Activity 组件使用问题排查
react.js
wordbaby13 小时前
React 误区粉碎:useEffectEvent 是“非响应式”的,所以它不会触发重渲染?
前端·react.js
crary,记忆14 小时前
React 之 useEffect
前端·javascript·学习·react.js
锈儿海老师16 小时前
深入探究 React 史上最大安全漏洞
前端·react.js·next.js
xiechao16 小时前
函数组件 useEffect 清理函数抛错:ErrorBoundary 能捕获吗?
前端·react.js
wordbaby17 小时前
组件与外部世界的桥梁:一文读懂 useEffect 的核心机制
前端·react.js
wordbaby17 小时前
永远不要欺骗 React:详解 useEffect 依赖规则与“闭包陷阱”
前端·react.js