react中的性能优化方案有哪些

简介: react中的性能优化方案有哪些

1. 前言

  1. 之前写了篇文章 性能优化的方案有哪些,里面都是大方向上的
  2. 针对具体的框架有些具体的方案 比如 react中的useMemo 和 useCallback -React.memo
  3. 在说点其他的

2. useMemo 和 useCallback -React.memo

1.使用 React.memo:使用 React.memo 对组件进行记忆化处理,避免不必要的重新渲染

  1. 使用 useMemo:使用 useMemo 缓存计算昂贵的值,避免重复计算。
  2. 使用 useCallback:使用 useCallback 缓存回调函数,避免在每次渲染时创建新的回调函数。

3. 避免不必要的渲染:

  1. 通过使用shouldComponentUpdatePureComponent(类组件)或 React.memo(函数式组件)来避免不必要的组件渲染。



4. 列表渲染优化:

  1. 在列表渲染时,使用唯一的 key 属性,避免重复渲染和混乱的 DOM 更新

5.懒加载组件:

  1. 使用 React.lazySuspense来懒加载组件,只在需要时才进行加载,提高初始加载速度。
  2. React.lazy 用法


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
2天前
|
前端开发 API 开发者
你可能没有关注过的 React 性能优化,帮你突破瓶颈
你可能没有关注过的 React 性能优化,帮你突破瓶颈
|
4天前
|
前端开发 数据可视化 UED
React的代码分割:使用React.lazy和Suspense进行性能优化
【4月更文挑战第25天】使用React的`React.lazy`和`Suspense`进行代码分割可优化性能,按需加载组件以提升应用启动速度和用户体验。`React.lazy`接收返回Promise的组件动态导入,而`Suspense`提供加载指示器,保证加载过程中的用户体验。适用于大型组件或路由应用,但需注意服务器配置、避免过度拆分和确保关键代码即时加载。合理运用能显著改善应用性能。
|
4天前
|
前端开发 JavaScript
React 性能优化新招,useTransition
React 性能优化新招,useTransition
|
4天前
|
存储 前端开发 JavaScript
React 性能优化终章,成为顶尖高手的最后一步
React 性能优化终章,成为顶尖高手的最后一步
|
4天前
|
缓存 前端开发 架构师
理解这个机制,是成为React性能优化高手的关键
理解这个机制,是成为React性能优化高手的关键
|
4天前
|
前端开发
React组件性能优化
React组件性能优化
|
4天前
|
前端开发 JavaScript
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
46 0
|
2天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
4天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
4天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择

热门文章

最新文章