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
相关推荐
Dontla17 小时前
React zustand todos案例(带本地存储localStorage、persist)todoStore.ts
前端·react.js·前端框架
silence_xiang17 小时前
【React】首页悬浮球实现,点击出现悬浮框
前端·javascript·react.js
前端老宋Running18 小时前
React组件命名为什么用小写开头会无法运行?
前端·react.js·面试
nvd1119 小时前
Lit.js 入门介绍:与 React 的对比
开发语言·javascript·react.js
lyx_201620 小时前
PDF文档导出分页功能实现
react.js·typescript·pdf·react
格鸰爱童话1 天前
next.js(二)——从react到next.js
前端·javascript·react.js
im_AMBER1 天前
Vite + React 项目启动深度踩坑指南
前端·学习·react.js·前端框架
Hammer Ray1 天前
前端开发基础概念(React)
前端·react.js·前端框架
im_AMBER1 天前
React 18
前端·javascript·笔记·学习·react.js·前端框架
Dm_dotnet1 天前
React:使用Tailwind CSS、Streamdown与Ant Design X
react.js