Javascript React中调用render（）的确切时间是多少？

以下代码的输出为：

render
after setState
render
setTimeout after setState 

为什么在handleClick（）之后和setTimeout回调函数之前调用render（）？ 调用render（）的确切时间是多少

    var React = require('react'),
      ReactDOM = require('react-dom');

    var HelloWorld = React.createClass({
      getInitialState:function(){
        return {
          time:new Date()
        };
      },
      handleClick:function(e){
        this.setState({time:new Date()});
        setTimeout(function(){
          console.log('setTimeout after setState');
        },0);
        console.log('after setState');
      },
      render: function() {
        console.log('render');
        return (
          <p onClick={this.handleClick}>
            It is {this.state.time.toTimeString()}
          </p>
        );
      }
    });

    ReactDOM.render(
      <HelloWorld />,
      document.getElementById('example')
    );

var React=require（'React'），
ReactDOM=require（'react-dom'）；
var HelloWorld=React.createClass({
getInitialState:函数（）{
返回{
时间：新日期（）
};
},
handleClick:函数（e）{
this.setState（{time:new Date（）}）；
setTimeout（函数（）{
log（'setState之后的setTimeout'）；
},0);
console.log（'setState'之后）；
},
render:function（）{
console.log（'render'）；
返回(

它是{this.state.time.toTimeString（）}

);
}
});
ReactDOM.render(
,
document.getElementById（'示例'）
);

tl；dr

render在匿名函数之前被调用，正如您在setTimeout之前调用setState一样，出于这些目的，Javascript是单线程的

---

以下是代码中发生的情况：

您定义了一个类Hello World

您称之为ReactDOM.render的地方

React通过getInitialState方法设置状态

您的组件将被渲染

你点击你的元素

handleClick使用React Normalized事件激发

您可以设置状态并对标记本身进行反应以重新渲染

您可以设置Timeout，它恰好包含一个console.log

Javascript是单线程的，所以下一步要做的就是渲染

渲染已完成，因此可以启动setTimeout中的匿名函数

---

除此之外，无法保证您在JS控制台中看到的输出顺序肯定是它们发送的顺序。

Render在状态更改时调用。想法是，如果应用程序状态不同，您希望更改视图。控制台日志输出似乎是预期的结果。我不清楚的是，渲染不是在setState之后立即调用的，而是在handleClick结束之后调用的，因此“after setState”是第二个“render”之前的日志。调用setState只会设置一些对象属性，这些属性会作出反应，然后用于决定是否重新渲染。由于Javascript是单线程的，当其他代码已经运行时，它无法呈现，必须等待它完成，因此首先触发handleClick中的console.log，然后调用render。@您还有其他问题吗？