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
相关推荐
鹤鸣的日常10 小时前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab
vim怎么退出18 小时前
Dive into React——事件系统
前端·react.js·源码阅读
打小就很皮...21 小时前
基于 Python + LangChain + React 实现智能发票识别与验真系统实战
前端·react.js·langchain·ocr·发票识别
圣殿骑士-Khtangc1 天前
单智能体落地实战:从 ReAct 到 Production-Ready AI Agent 全链路解析
人工智能·react.js
Patrick_Wilson1 天前
router.replace 之后紧跟 reload,页面为什么无限刷新?
javascript·react.js·浏览器
xiaofeichaichai1 天前
React Hooks
前端·javascript·react.js
markfeng82 天前
Redux 与 React-Redux 深度解析:从原理到最佳实践
react.js
微扬嘴角2 天前
react篇4--setState、LazyLoad和Hooks
前端·javascript·react.js
光影少年2 天前
React 项目常见优化方案
前端·react.js·前端框架
光影少年2 天前
组件复用:HOC、Render Props、自定义Hook 对比
前端·react.js·掘金·金石计划