react 项目的性能优化
阅读原文时间:2023年07月08日阅读:1

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