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
相关推荐
英俊潇洒美少年3 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
英俊潇洒美少年3 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js
~无忧花开~5 小时前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
哈__6 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-maps
javascript·react native·react.js
GISer_Jing7 小时前
Next.js全栈开发实战与面试指南
前端·javascript·react.js
im_AMBER7 小时前
万字长文:从零实现 JWT 鉴权
前端·react.js·express
Liudef0611 小时前
从0到1开发ReAct智能体:原理、实现与最佳实践
前端·react.js·前端框架
英俊潇洒美少年12 小时前
react useDeferredvalue和useTransition的讲解
前端·react.js·前端框架
Csvn13 小时前
自定义 Hooks 实战(下)
react.js
哈__13 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-push-notification-ios
react native·react.js·ios