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
相关推荐
骑自行车的码农1 小时前
React 上下文游标栈 contextStackCursor valueStack fiberStack
前端·react.js
itslife1 小时前
优先级
前端·react.js
Hejjon2 小时前
React 封装命令式弹窗
前端·javascript·react.js
OEC小胖胖17 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
水煮白菜王1 天前
从零搭建 React 工程化项目
前端·javascript·react.js
会飞的鱼先生1 天前
react的基本使用
前端·react.js·前端框架
无羡仙2 天前
虚拟列表:怎么显示大量数据不卡
前端·react.js
萌萌哒草头将军2 天前
字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
前端·javascript·react.js
Duck不必2 天前
从零到一:现代化 React 组件库搭建指南
react.js·前端框架
Python私教2 天前
yggjs_react使用教程 v0.1.1
前端·react.js·前端框架