javascript - React 中调用 render() 的确切时间是多少？

Question

下面代码的输出是:

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')
    );

Answer 1

tl;博士

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

<小时/>

以下是您的代码中发生的情况:

1. 您定义一个类 Hello World。
2. 你调用ReactDOM.render的地方
3. React 通过 getInitialState 方法设置状态。
4. 您的组件已渲染。
5. 您点击您的

   元素。

6. handleClick 使用 React 规范化事件触发。
7. 您设置状态，React 会将自身标记为重新渲染。
8. 您setTimeout，它恰好包含console.log
9. Javascript 是单线程的，因此接下来要触发的是渲染
10. 渲染已完成，因此可以触发 setTimeout 中的匿名函数。

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