react项目优化

对于正常的项目优化一般分为三个方面，开发过程中、上线之后的首屏优化、运行过程中。

• 开发过程中根据需求来作项目优化，这里重点说说上线后的首屏及运行过程中的优化。

1. 首屏优化一般涉及到几个指标，FP、FCP、FMP；提升用户体验有效方式是将FCP提前，需要做一些工程化的处理，优化一些的资源的加载；如可以使用分包策略，资源的减少是最有效的加快首屏打开的方式；对于CSR应用，FCP的过程一般是首先加载js和css资源，本地的js加载完成后，再向服务端请求数据，做内容的初始化渲染，这个过程会有多次反复请求的过程。此时可以做骨架屏和部分结构的预渲染，可以结合suspence与lazy做懒加载动态组件的方式；另一种方式就是SSR的方式，这种方式在首屏优化有很大优势，但是会增加一定学习成本，有一定的瓶颈，一般在node服务端处理，建议使用stream流的方式来处理，这种更便于node端的处理。不管是CSR还是SSR，都建议配合使用Service worker，来控制资源的调配及骨架屏秒开体验。
2. react项目上线后，首先需要保障就是可用性，可以通过React.Profiler分析组件的渲染次数及耗时的一些任务，但是React.Profiler记录的是commit阶段的数据，需要结合performance API一起分析；
3. 由于React本身的特性，在父级的props发生变化后，所有与props不相关的子组件在没有添加条件控制的情况下都会触发render渲染，可以结合PureComponent以及React.Memo等作浅比较处理，需要结合不可变数据来处理，当然也可以结合ShouldComponentUpdate来做深比较处理.
4. 运行状态的优化，本质就是减少不必要的render，React.useMemo与React.useCallback也可做一定的性能优化
5. 慎用redux及context，减少不必要的render.
6. 使用componentDidCatch来做应用错误边界处理，保证整个应用的可用性。

• 实际开发过程其他优化点：

1. 使用不可变的数据结构，如immutable.js
2. 使用唯一键值迭代
3. 使用web worker做密集型任务处理
4. 不在render中处理数据
5. 减少不必要的标签，使用React.Fragments