React 必须调用 setTimeout 才能正确更新视图答案

【问题标题】：React must call with setTimeout to update view correctlyReact 必须调用 setTimeout 才能正确更新视图
【发布时间】：2017-06-19 02:57:14
【问题描述】：

我正在修改此文件 https://github.com/davidguttman/react-pivot/blob/master/index.jsx#L84 以将 Dimensions 组件移出到父组件。

我注意到一件奇怪的事情是我必须调用setTimeout(this.updateRows, 0) 而不是this.updateRows() 才能正确更新视图。

知道为什么会这样吗？ AFAIK，setTimeout(_,0) 只是使函数调用异步（即允许并发执行以提高性能）。为什么这有助于正确渲染视图？我问这个问题是为了避免“巧合编程”。

【问题讨论】：

【解决方案1】：

这是因为setState is asynchronous。

由于您是在 updateRows 函数中从 this.state 读取数据，因此在状态实际更新之前它不会起作用。像您一样使用setTimeout 是允许状态更新的一种方法。 setState 将完成，然后updateRows 将在下一帧执行。

更好的方法是使用setState的回调参数

this.setState({dimensions: updatedDimensions}, () => {
  this.updateRows();
});

另一种选择是保留对象中的任何状态更改并将其传递给函数，而不是直接从 this.state 读取，但这会导致更复杂。

【讨论】：

【解决方案2】：

在这种情况下，它可能不是关于“并发执行”，而是更多关于event loop。 setTimeout 调用从当前调用堆栈中删除函数执行并将一个条目添加到消息队列中。当前正在执行的堆栈将在队列中的下一条消息开始执行之前运行完成。

我不知道为什么在这个特定实例中需要这样做 - 必须在当前堆栈中设置某种状态，这是 updateRows 产生所需结果所必需的。

【讨论】：