React lazy suspense 死循环渲染 bug

40 阅读1分钟

现象:在低性能机器上拉起结算浮层时,总是拉不起来,并且内存暴增,结算浮层中的图片重复请求。

实际原因:react lazy 包裹该结算浮层组件,导致该组件的渲染优先级变低,该组件中有每隔 500ms 进行一次setState 的定时器,导致渲染竞争,每次该 lazy 组件请求图片资源,准备 dom,准备到一半,被 setState 后(优先级高),react 抛弃之前准备的资源和 dom,进行 setState,然后重新在请求图片资源准备 dom,重复,直到内存爆满,v8 引擎进行 OOM 崩溃处理。