警报援引才反应过来最初呈现的，而不是我经历的Codecademy网站后

Question

JS componentDidMount生命周期方法弹出阵营当然JS：https://www.codecademy.com/courses/react-102/lessons/mounting-lifecycle-methods/exercises/componentdidmount

的教训说明了生命周期做出反应的安装方法，命令他们作为基础知识如下：componentWillMount - > render - > componentDidMount。

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

的问题是，根据指令包含在componentDidMount方法（话说警告：“你刚才目睹了......华丽登场!!!! !!!'）应在后弹出红色文字在屏幕上呈现。但是，当我测试它时，实际上在之前弹出文本呈现。这是预期的行为？

全码：

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

请一定要打开检查，我也为了增添了debugger语句时看到componentDidMount被称为