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
相关推荐
弓.长.12 小时前
React Native 鸿蒙跨平台开发:BottomSheet 底部面板详解
javascript·react native·react.js
摘星编程12 小时前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js
摘星编程13 小时前
React Native for OpenHarmony 实战:SearchBar 搜索栏详解
javascript·react native·react.js
摘星编程16 小时前
React Native for OpenHarmony 实战:SecureStorage 安全存储详解
安全·react native·react.js
摘星编程17 小时前
React Native for OpenHarmony 实战:ProgressBar 进度条详解
javascript·react native·react.js
摘星编程18 小时前
React Native for OpenHarmony 实战:SegmentControl 分段控件详解
javascript·react native·react.js
摘星编程18 小时前
React Native for OpenHarmony 实战:ProgressRing 环形进度详解
javascript·react native·react.js
TAEHENGV18 小时前
React Native for OpenHarmony 实战:数学练习实现
javascript·react native·react.js
弓.长.18 小时前
React Native 鸿蒙跨平台开发:长按菜单效果
react native·react.js·harmonyos
Amumu1213819 小时前
React Router 6介绍
前端·react.js·前端框架