react 项目的性能优化有哪些?

1、react 模块化处理

  就是将react内容进行模块化划分,一个模块一个组件,react更新机制是组件重新更新

2、在react项目中更新数据,不要直接将 useState方法 更新方法放到模块当中:避免使用内联函数

  在编译模块的时候使用,react会将 模块=> vnode => 上面的所有处理方法,合成集中处理

  第一次自动触发,返回事件,这个事件是useState修改数据的方法(他是一个极其复杂的方法),就是我们点击事件处理方法,在模板编译的时候,给我们点击事件赋值一个方法,这个复杂的方法,让项目有性能损耗

3、Fragment <></>

  空的双标签 => 占位符

4、路由懒加载

  作用:就是这个项目首次加载项目,如果使用路由懒加载,这个项目就不会加载 用户没有进入过懒加载页面的代码,提高项目加载的速度

  语法:React.lazy 和 Suspense

5、组件的缓存, 使用React.memo

  React.memo 缓存组件,只有当这个缓存组件的数据发生改变了才会重新创建

  在工作中基本不用 useMemo,useCallback, 做react 性能优化

  用法:我们写了一个页面,页面进行模块化划分 => 如果没有就不用,如果有就需要

6、动态生成路由和动态生成侧边栏导航

  做了什么性能优化?

  我的项目 10个权限,对应的侧边栏导航是不同的,那他的路由信息也是不同,我们需要动态的生成,减少我们项目代码

7、将项目中一些大的本地图片,上传阿里云,七牛云,从而减少项目的体积

8、减少项目中的错误代码

9、列表渲染,添加key

  

最新文章

  1. php实现设计模式之 策略模式
  2. 阿里巴巴分布式服务框架dubbo学习笔记
  3. 批处理中的echo命令图文详解
  4. php--sphinx的使用
  5. Android App启动错误的问题(connection to the server was unsuccessful)
  6. hdu 1429 胜利大逃亡(续)(bfs+位压缩)
  7. java15 IO装饰设计模式
  8. Android(java)学习笔记142:使用Sqlite基本流程
  9. C++中类的内存空间大小(sizeof)分析
  10. JS中onload的各种使用
  11. SQLSERVER一些公用DLL
  12. thinkphp的model模型的设计经验总结
  13. 原生ajax封装,数据初始化,
  14. ajax属性详解
  15. https和http 调用过程中请求头 referrer 获取不到的问题
  16. linux 网卡的混杂模式的取消
  17. webhook: requestbin
  18. Oracle 12.2报错ORA-15032、ORA-15410或ORA-15411解决
  19. xubuntu无法进图形界面问题
  20. vue插件ele使用小坑

热门文章

  1. Karmada跨集群优雅故障迁移特性解析
  2. Python3 Scrapy 框架学习
  3. 【Java】【数据库】索引为何使查询变得更快?--B+树
  4. ChatGPT杀疯了,这人工智能也太离谱了吧
  5. 前端入门 HTTP协议 HTML简介 head内常见标签 body内常见标签 特殊符号 列表标签 表格标签 表单标签
  6. 微服务项目Git仓库自动化脚本
  7. 【转载】【WinAPI】LockWindowUpdate的函数的用法
  8. [python] 基于matplotlib_venn实现维恩图的绘制
  9. [C++]什么是POD?
  10. UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang) 代码