type: title: React 卡顿排查 date: 2022-03-22 15:45:20 category: article photos: tags:
- consectetur description: React 卡顿排查
1.使用 Performance 录制应用快照，查看调用情况 2.查看 network 中网络请求情况，是否有资源因过大请求阻塞，导致后续资源无法加载，这种情况一般选择分包或固定资源选择 cdn 分担（多域名。浏览器设置的 http2.0 以下同域名仅允许同时最多 6 个 tcp 的限制） 3.可以通过 React Developer Tools 的 Profiler 的 Flamegraph（火焰图）或 Ranked（渲染时长排行榜） 查看各组件的渲染时长，根据对应的组件可以进行排查渲染问题，以下作答： a). 通过检查代码中是否有重复触发的 useEffect b). 检查是否有多次不同渲染周期中触发的 setState 导致的渲染（比如在一个事件中导致的 state 更新，导致依赖于该 state 的 useEffect 触发，而该 effect 中又有其他的 setState，导致多个有依赖项的 useEffect 不同批次连环触发） c). 检查是否在某个超大组件中需要渲染的元素过多，可使用子组件可考虑使用 pureComponent，或 React.mome ，或使用 useMome 来根据依赖项更新子组件，或在父组件中将子组件需要的 props 通过使用 useMome 或 useCallback 缓存， 或在子组件中使用 shouldComponentUpdate 中校验是否需要更新来减少更新 d). 检查是否存在拖拽业务，这类业务一般会导致大量的 diff 存在，可以的话可以考虑不使用 React 的方式去实现，使用第三方非 React 的 JS 库去实现。 e). 同上情况，存在大量增删改查逻辑，会导致大量的的 diff 可以检查列表元素是否存在唯一的 key，通过 key 可以让 React 复用 Fiber 从而避免重复创建 Fiber 节点与 Dom 节点 f). 存在未清除掉的定时器或 dom 监听事件