Javascript 延迟componentDidUpdate，使其在浏览器绘制后执行

我在

componentdiddupdate（）

中有一个

Dashboard

组件，它有一些真正的DOM操作（它使用一些图表库和d3.js）

这些操作总共可能需要数百毫秒，我刚刚注意到，在切换页面时，所有

组件diddupdate

s都是在浏览器绘制之前执行的。顺序是：

卸载当前页面

安装仪表板（及其子项）

分派Redux操作以获取某些数据

组件更新（仪表板及其子级）

浏览器绘制仪表板（用户现在可以看到仪表板页面）

我发现这表明这是一种故意的行为。但这种行为让我的应用程序感觉滞后。因为当将页面从

Foo

切换到

Dashboard

时，用户将停留在

Foo

上，必须等待大约0.6秒才能看到

Dashboard

页面显示

我当前的解决方法是使用

setTimeout

包装这些DOM操作：

componentDidUpdate() {
  setTimeout(() => this.expensiveDOMOperations(), 0)
}

此解决方案有效，这些操作将在浏览器绘制后延迟并执行。但是有很多我觉得不对的

setTimeout

所以我的问题是，有没有更好/更优雅的解决方案

如果有人知道答案，我还有一些其他问题：

设置超时（…，0）

是否保证在浏览器绘制后执行代码？（在Vue.js中，有一个助手可以执行此操作）

纤维中的这种行为会改变吗

---

当从

Foo

转到

Dashboard

时，

render（）

会运行多少次？@Chris 1，但在那之后，Dashboard将总共调度4个动作，每个动作都会导致重新渲染，所以它会渲染5次？我刚刚删除了这些动作来测试

render（）

仅执行1time@Chris在我的真实代码中，它是5，但是2~5的

render

s只是用来向仪表板填充数据。