项目总结

[violet0sea]

React CMS 优化

模块化和组件化方面的优化

项目目录划分

• api 放置api的接口，已页面的路由划分
• asset 共享的资源文件，发那个只scss, img
• components 放置自定义的组件
• hooks 放置共享的hooks
• layout 基本布局Header Navbar Router
• page 各个业务模块
• utils 项目配置、请求接口、常量配置、工具方法

代码层面的优化

1. 避免不必要的渲染，React.PureComponent & React.memo分别针对Class Component和Function Component防止没必要的渲染；
2. 使用componentDidCatch Api 捕获错误，利用props.children封装一个ErrorBoundary组件包裹原有组件，防止组件爱你内部发生错误导致整个页面挂掉；
3. 在Material-ui的组件基础上封装组件，解决相同类型的ui以及代码逻辑的复用，a. 图片上传实现icon和cover两种不同大小的组件包装，ui层是图片在左，按钮在右，逻辑层是使用 FileReader api 读取文件信息转化为base64上传 b. 删除操作需要二次确认的对话框的封装；
4. 升级React版本使用，React Custom Hooks复用组件内部的逻辑；
5. 使用scss预处理，定义基本的ui样式，减少css的重复代码；
6. 写一些工具函数，实现相同功能的代码复用；
7. 动态路由，减少首次加载时包的大小，React-router对于相同的组件应用在不同的路由下时使用不同的key强制渲染；
8. 精简state里的数据，移除与ui状态无关的数据，与UI无关的数据可以挂在组件的实例上；
9. 灵活使用function 和 Class，根据组件是否需要state和生命周期来决定选择哪一种形式