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

Question

我有一个Dashboard组件，它在componentDidUpdate()中有一些真正的DOM操作（它使用了一些图表库和d3.js）。

这些操作可能总共花费数百毫秒，我只是注意到在切换页面时，所有componentDidUpdate都在浏览器绘制之前执行。顺序是：

1. 取消当前页面
2. 装载仪表板（及其子级）
3. 调度Redux操作以获取某些数据
4. componentDidUpdates（仪表板及其子项）
5. 浏览器绘制仪表板（用户现在可以看到仪表板页面）

我发现this issue表示这是故意行为。但这种行为使我的应用程序感到迟钝。因为在将页面从Foo切换到Dashboard时，用户会停留在Foo并且必须等待大约0.6秒才能看到Dashboard页面显示。

我目前的解决方法是使用setTimeout包装这些DOM操作：

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

此解决方案有效，这些操作在浏览器绘制后推迟并执行。但是有很多setTimeout让我感觉不对劲。

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

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

1. setTimeout(..., 0)是否保证在浏览器绘制后代码将被执行？ （在Vue.js中有一个nextTick()帮助器来执行此操作）
2. React Fiber会改变这种行为吗？