我的回答
- shouldComponentUpdate中进行优化
- 使用pureComponent或者memo进行浅比较
- 不在render中修改数据
- 使用合适的key值
参考回答
对于正常的项目优化，一般都涉及到几个方面，开发过程中、上线之后的首屏、运行过程的状态
首屏优化一般涉及到几个指标FP、FCP、FMP; 要有一个良好的体验是尽可能的把FCP提前，需要做一个工程化处理，去优化资源的加载方式以及分包策略，资源的减少是最有效的加快首屏打开的方式
对于CSR的应用，FCP的过程一般是首先加载js与css资源，js在本地执行完成，然后加载数据回来，做内容初始化渲染，这中间就有几次的网络反复请求的过程；所以CSR可以考虑使用骨架屏以及预渲染(部分结构预渲染)、suspence与lazy做懒加载动态组件的方式
当然还有另外一种方式就是ssr的方式，ssr对于首屏的优化有一定的优势，但是这种瓶颈一般在node服务器端的处理，建议使用stream流的方式来处理，对于体验与node端的内存管理等都有优势
不管对于CSR或SSR，都建议配合使用Service worker，来控制资源的调配以及骨架屏秒开的体验 react项目上线后，首先需要保障的是可用性，所以可以通过React.Profiler分析组件的渲染次数以及好事的一些任务，但是Profile记录的是commit阶段的数据，所以对于react的调和阶段就需要结合performance API一起分析 由于React是父级props改变之后，所有与props不相关子组件在没有添加条件控制的情况下，也会触发render渲染，这是没有必要的，可以结合React的PureComponent以及React.memo等做浅比较处理，当然也可以结合使用
ShouldComponentUpdate 做深比较处理 所有的运行状态优化，都是减少不必要的render，React.mome与React.callback也是可以做很多优化的地方
在很多应用中，都会涉及到使用redux以及在使用context，这两个都可能造成许多不必要的render，在使用的时候，也需要谨慎的处理一些数据；
最后就是保证整个应用的可用性，为组件创建错误边界，可以使用componentDidCatch来处理
实际项目中开发过程还有很多其他的优化点
- 保证数据的不可变性
- 使用唯一的键值迭代
- 使用web worker做密集型的任务处理
- 不在render中处理数据
- 不必要的标签，使用React.Fragment
若有收获，就点个赞吧
0 人点赞
