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

Question

我正在学习 Codecademy React JS 类(class):https://www.codecademy.com/courses/react-102/lessons/mounting-lifecycle-methods/exercises/componentdidmount

本类(class)解释了 React 生命周期安装方法的基础知识，它们按如下顺序排列:componentWillMount -> render -> componentDidMount。

此代码笔演示了问题:http://codepen.io/PiotrBerebecki/pen/vXyYKP

问题是，根据说明，componentDidMount 方法中包含的警报(说:“您刚刚见证了... 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 进行尝试。

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

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