оповещения вызывается в React JS componentDidMount метод Жизненный цикл всплывает до первоначального рендеринга, а не после

Question

я иду через Codecademy Реагировать 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 методе (говоря: «ТЫ ПРОСТО СВИДЕТЕЛЬ дебюта ... кричащий !!!! !!! ') должен появиться после красный текст отображается на экране. Однако, когда я тестирую его, сообщение действительно появляется до текст визуализируется. Это ожидаемое поведение?

Полный код:

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 называется