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

Question

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

课程介绍了 React 生命周期安装方法的基础知识，顺序如下：componentWillMount -> render -> componentDidMount。

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

问题是，根据说明，componentDidMount 方法 中包含的 警报（即：'YOU JUST WITNESSED THE DEBUT OF... FLASHY!!!!!!!'） 应该弹出在 之后，红色文本呈现在屏幕上。但是，当我对其进行测试时，警报 实际上会在 呈现文本之前弹出。这是预期的行为吗？

完整代码：

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