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
相关推荐
代码随想录33 分钟前
Agent大厂面试题汇总:ReAct、Function Calling、MCP、RAG高频问题
前端·react.js·前端框架
Highcharts.js36 分钟前
在 React 中使用 useState 和 @highcharts/react 构建动态图表
开发语言·前端·javascript·react.js·信息可视化·前端框架·highcharts
懂懂tty4 小时前
React并发模式与Suspense原理
react.js
欧呦固7 小时前
# 🚀 Solidity从零到一:手把手教你开发ERC-20代币
react.js
Ruihong7 小时前
Vue 转 React:揭秘 scoped 样式是如何被 VuReact 编译的?
vue.js·react.js·面试
Ruihong7 小时前
Vue 组件样式 <style> 转 React:VuReact 怎么处理?
vue.js·react.js·面试
A923A8 小时前
Vue 和 React 常用脚手架工具总结
前端·vue.js·react.js·脚手架
Highcharts.js8 小时前
步骤总结|使用 React + Highcharts 实现动态更新图表
前端·javascript·react.js·前端框架·highcharts·图表渲染
好家伙VCC8 小时前
# React发散创新:从状态管理到自定义Hook的极致实践与性能优化在现代前端开发
java·javascript·python·react.js·性能优化
M ? A20 小时前
Vue 动态组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact