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 小时前
如何实现RN 多环境、多渠道打包
前端·react native·react.js
云上工程笔记17 小时前
AstraFlow + React/Vite:如何用自然语言开发并部署一个 AI 咖啡网站原型
前端·人工智能·react.js
光影少年18 小时前
React18 对RN 的影响
android·前端·react.js·ios·前端框架
xiaoyan201519 小时前
2026最新款Electron41+React19+AntDesign电脑端后台管理系统Exe
react.js·electron·vite
用户2986985301419 小时前
在 React 中使用 JavaScript 将 HTML 转换为图片
javascript·react.js·html
科里 Coralyx21 小时前
CoT Toolformer ReAct:工具调用、推理链与 Agent 的起源
前端·react.js·前端框架
走到天涯海角1 天前
react里面的长列表渲染优化
前端·react.js·前端框架
晴天162 天前
React 版本迭代解析:从15到19 核心差异-Day40
前端·react.js·前端框架
倾颜2 天前
AI Chat 长会话性能实践:消息虚拟化、动态高度与流式滚动设计
前端·react.js·node.js
天道kabuto2 天前
前端每日知识点:React Fiber 与 AI 流式长文本渲染:从调度原理到工程落地
react.js