react 项目的性能优化

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