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
相关推荐
AI陪跑3 小时前
深入剖析:GrapesJS 中 addStyle() 导致拖放失效的问题
前端·javascript·react.js
昨晚我输给了一辆AE863 小时前
react-hook-form 初始化值为异步获取的数据的最佳实践
前端·react.js·强化学习
前端无涯4 小时前
React Router(web) 全解析:知识点、工作注意点及面试重点
前端·react.js·前端框架
AY呀4 小时前
新手必读:React组件从入门到精通,一篇文章搞定所有核心概念
前端·javascript·react.js
Ingsuifon4 小时前
ReAct智能体实现示例
前端·react.js·前端框架
IT古董4 小时前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第四篇:登录与注册系统(核心篇)
javascript·react.js·ui
开发者小天4 小时前
React中useCallback的使用
前端·javascript·react.js·typescript·前端框架·css3·html5
开发者小天4 小时前
React中的useState传入函数的好处
前端·javascript·react.js
鹏多多5 小时前
React使用useLayoutEffect解决操作DOM页面闪烁问题
前端·javascript·react.js
T0uken5 小时前
Go + React 单文件 Web 应用模板开发指南
前端·react.js·golang