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
相关推荐
霸王蟹4 小时前
React Fiber 架构深度解析:时间切片与性能优化的核心引擎
前端·笔记·react.js·性能优化·架构·前端框架
outstanding木槿10 小时前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
霸王蟹11 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹11 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
Coding的叶子15 小时前
React Flow 节点事件处理实战:鼠标 / 键盘事件全解析(含节点交互代码示例)
react.js·交互·鼠标事件·fgai·react agent
it_remember21 小时前
新建一个reactnative 0.72.0的项目
javascript·react native·react.js
ZHOU_WUYI1 天前
使用 Docker 部署 React + Nginx 应用教程
nginx·react.js·docker
互联网搬砖老肖1 天前
React组件(一):生命周期
前端·javascript·react.js
小马哥编程1 天前
React和Vue在前端开发中, 通常选择哪一个
前端·vue.js·react.js
OK_boom1 天前
React-useRef
javascript·react.js·ecmascript