在React JS componentDidMount生命周期方法中调用的警报在初始渲染之前而不是之后弹出

Question

我正在参加Codecademy React JS课程：https://www.codecademy.com/courses/react-102/lessons/mounting-lifecycle-methods/exercises/componentdidmount

本课程解释了React生命周期安装方法的基础知识，如下所示：componentWillMount - ＆gt;渲染 - ＆gt; componentDidMount。

此codepen演示了此问题：http://codepen.io/PiotrBerebecki/pen/vXyYKP

问题在于，根据说明，componentDidMount方法中包含警告（说：＆＃39;您只是见证了...... FLASHY !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!＆＃39;）应在后弹出红色文字在屏幕上呈现。但是，当我测试它时，警告实际上会在呈现文本之前弹出。这是预期的行为吗？

完整代码：

var Flashy = React.createClass({
  componentWillMount: function() {
    alert('AND NOW, FOR THE FIRST TIME EVER...  FLASHY!!!!');
  },

  componentDidMount: function() {
    alert('YOU JUST WITNESSED THE DEBUT OF...  FLASHY!!!!!!!');
  },

  render: function() {
    alert('Flashy is rendering!');
    return (
      <h1 style={{ color: this.props.color }}>
        OOH LA LA LOOK AT ME I AM THE FLASHIEST
      </h1>
    );
  }
});

ReactDOM.render(
  <Flashy color='red' />,
  document.getElementById('app')
);

setTimeout(function() {
  ReactDOM.render(
    <Flashy color='green' />,
    document.getElementById('app')
  );
}, 2000);

Answer 1

它实际上按预期工作。

但是alert函数阻止了DOM呈现

您实际上可以使用在后台运行的console.log来尝试。

看看这个代码集http://codepen.io/joseaplwork/pen/xERkaG

确保打开检查器，我还添加了一个调试器语句，以便查看何时调用componentDidMount