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
相关推荐
im_AMBER14 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界14 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
今天头发还在吗18 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
sjin1 天前
React源码 - 关键数据结构
前端·react.js
IT小哥哥呀1 天前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型
古茗前端团队1 天前
小程序 Galacean Effect实践
react.js
JamSlade1 天前
react 无限画布难点和实现
前端·react.js
Cxiaomu1 天前
React Native 项目中 WebSocket 的完整实现方案
websocket·react native·react.js
im_AMBER1 天前
React 02
前端·笔记·学习·react.js·前端框架
鹏多多1 天前
React动画方案对比:CSS动画和Framer Motion和React Spring
前端·javascript·react.js