React解密：React实际项目开发中可以做哪些优化？

我们知道，项目优化，是开发中的重中之重，一般会分为几个阶段：开发过程中，上线之后的首屏，运行中的状态。而上线之后的首屏和运行中的优化最为多：

1. 首先会涉及到几个指标，FP（ 页面在导航后首次呈现出不同于导航前内容的时间点）、FCP（首次绘制任何文本，图像，非空白canvas或SVG的时间点）、FMP（首次绘制任何文本，图像，非空白canvas或SVG的时间点），要有一个良好的体验是尽可能的把FCP提前，需要做一些工程化的处理。去优化资源的加载。
2. 方式及分包策略：资源的减少是最有效的加快首屏打开的方式。
3. 对于CSR的应用，FCP的过程一般是首先加载js和css 资源，js在本地执行完成，然后加载数据回来，做内容的初始化渲染，这其中就有几次的网络反复请求的过程。所以CSR可以考虑使用骨架屏以及预渲染或者懒加载动态组件的方式。
4. 当然还有另一种方式就是SSR,SSR对于首屏的优化具有一定的优势，但是这种方式一般会是在node服务器端来处理。建议使用stream流来处理，对于体验与node端的内存管理等，具有优势。
5. 不管是SSR还是CSR,都建议使用Service Worker，来控制资源的调配以及骨架屏的秒开体验。
6. react项目上线之后，首先要保证的是可用性，所以可以通过React.Profiler分析组件的渲染次数以及耗时的一些任务，但是Profiler记录的是commit阶段的数据，所以react的调和阶段就需要结合performance API一起分析。
7. 由于react是父级props改变后，所有与props不相关的子组件没有添加条件控制的情况之下，也会出发re-render，这就是没有必要的了。可以结合React的PureComponent以及React.momo()等做浅比较的处理，当然也可以结合使用shouldComponentUpdate来做深比较。
8. 所以运行状态的优化们都是减少不必要的render，React.userMemo和React.useCallback也可以做一些简单的本地优化
9. 在很多应用中可能会涉及到redux以及使用到context，这都是可能造成不必要的reduer,所以在使用的时候，也需要注意处理一些数据。
10. 最后就是要保证整个应用的可用性，为组件创建错误边界，可以使用componentDidCatch来处理
11. 合理调用setState也是一个比较重要的优化

实际项目开发中还是有很多优化的地方：

1. 保证数据的不可变性
2. 使用唯一的键值迭代
3. 使用web worker做密集性的任务处理
4. 不在render中处理数据
5. 不必要的标签，使用React.Fragments