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
相关推荐
__log7 小时前
Vue 2 → Vue 3 迁移实战指南:不只是升级语法,更是一次思维跃迁
react.js
zzzzzz31016 小时前
AI Agent 开发实战:从零构建智能代码助手
react.js·node.js
不可食用盐1 天前
# AI开发基于 Tauri 2 + React 的所见即所得 Markdown 编辑器
react.js·rust·ai编程
光影少年2 天前
useMemo 与 useCallback 区别、各自解决什么性能问题、依赖陷阱
react.js·前端框架·掘金·金石计划
骑自行车的码农2 天前
react hooks原理:为什么不能在条件中使用 hook ?
vue.js·react.js
Highcharts.js2 天前
无需搭建数据管道,如何快速上线投资基金筛选器?
开发语言·javascript·react.js·前端框架·highcharts
接着奏乐接着舞2 天前
react native expo打包
javascript·react native·react.js
水云桐程序员2 天前
Web应用的分类
前端·javascript·vue.js·react.js·webkit
暗不需求2 天前
深入理解 React 受控组件与非受控组件:从源码到面试
前端·react.js·面试