这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
React渲染异常会造成什么结果
是什么
现象 : dev模式化会报错,pro下会白屏
原理
组件内的javascript错误会导致React内部状态被破坏并在下一次渲染中产生无法追踪的错误,这些错误基本上是由较早的其他代码,(非React组件代码)错误引起的,但React没有提供一种在组件内优雅的处理这些错误的方式,也无法从错误中恢复
会出现在哪
一般是在渲染层进下数据转换的过程中出现错误,而前端的渲染数据一般是通过后端来进行获取,数据是否安全就成了至关重要的问题
如何解决
- 可选链操纵符
- typescript支持
- 通过高阶组件拦截报错信息
怎么解决
工程化
预防层面:需看空安全方案在项目中的覆盖量从而保证团队内项目都将空安全用了起来
兜底层面:需保障方案在项目中的覆盖量,统计兜底页面成功兜底次数,最后兜底页面展示时即时完成线上报警
覆盖量怎么检测:通过查看项目的package.json文件是否引入相关的库,排查方案因不同的公司而异
如何分析和调优性能瓶颈
衡量
- Lighthouse
- 阿里云的ARMS
- New Relic
采集过程:以阿里云的ARMS为例,采集通常是由一个JavaScriptSDK来完成的
指标
FCP: 首次绘制内容的耗时
TTI: 页面可交互的时间
PageLoad: 页面完全加载的时间
FPS: 前端页面帧率
静态资源及API请求成功率
排查
FCP首次绘制内容的耗时
- Loading图标
- 骨架屏
- SSR服务端渲染
TTI页面可交互的时间
- 核心内容同步加载
- 非核心内容异步加载
- 图片懒加载
PageLoad 页面完全加载的时间
异步加载
FPS 前端页面帧率
- reactwindow
- 渲染优化
静态资源及API请求成功率
- 静态资源能用CDN就用CDN,大幅提高静态资源加载的成功率
- 域名解析时报可以采用静态资源域名自动切换的方案
- HTTPS
收益
通过TP数 TP50,TP90来具体量化技术转化效果
如何避免重新渲染
优化时机
重新渲染时会发生什么
React会构建并维护一套内部的虚拟Dom树,因操作Dom相对操作Javascript对象更慢
所以根据虚拟Dom树生成的差异更新真实Dom,每当一个组件的props或者state发生变更时,React都会将最新的元素与之前渲染的元素进行对比,以此决定是否有必要更新真实Dom,当它们不同时,React会更新该Dom
重新渲染成本昂贵,如果一次性引发重新渲染层级足够深会阻塞UI主线程执行,造成卡顿,引起页面帧率下降
根据业务要求进行优化
定位方式
还原场景,定位问题
通过工具进行复现
通过Chrome自带的Performance分析,主要用于查询javaScript执行栈中的耗时,确认函数卡顿点
通过ReactDeveloperTools的Profiler分析组件的渲染次数,开始时间和耗时
处理方案
缓存 : reselect
不可变数据 : ImmutableJs immersejs
手动控制 : shouldComponentUpdate useMemo React.memo
