Reactjsライフサイクル機能レンダリング2回

Question

componentDidMountのメカニックに関する質問があります。私は都市の予測データを取得するために外部APIを使用する天気予報アプリケーションを構築しています。

私の予測コンテナがこの

var React = require('react'); 
var Forecast = require('../components/Forecast'); 
var weatherHelpers = require('../utils/weather'); 

var ForecastContainer = React.createClass({ 
    getInitialState: function(){ 
    return { 
     isLoading: true, 
     forecastData: {} 
    } 
    }, 

    componentDidMount: function(){ 
    weatherHelpers.getCityForecast(this.props.routeParams.city) 
    .then(function(results){ 
     this.setState({ 
     isLoading: false, 
     forecastData: results 
     }) 
    }.bind(this)) 
    }, 

    render: function() { 
    return (
     <Forecast 
     city={this.props.routeParams.city} 
     isLoading={this.state.isLoading} 
     forecastData={this.state.forecastData} 
     /> 
    ) 
    } 
}); 

module.exports = ForecastContainer; 

のように構築された私は、HTTP GET天気APIへのリクエストとweatherHelpersと呼ばれるヘルパーファイル内の機能を格納を送信するためにaxiosを使用しています。

function Forecast(props) { 
    console.log(props) 
    return (
    <div style={styles.container}>Forecast component</div> 
) 
} 

予測コンポーネントからプロップをログに記録すると、2回記録されます。初期状態では1回、更新された状態では再び動作します。これはちょうど状態生活が動作していますか？componentDidMount内の初期状態と実行中の命令の間の遅れですか？私のコンポーネントの再レンダリングはありますか（したがって、2つのコンソールログ）。そうであれば、働いている仕組みは何か。コンポーネントはその状態をどのように聴いていますか？

Answer 1

renderは、ライフサイクルでcomponentDidMountより前に実行されるためです（React documentation参照）。

順序は次のとおりです。時間componentDidMountことで

constructor() 
componentWillMount() 
render() 
componentDidMount() 

が実行され、すでに実行されたrender。 componentDidMountの状態変化は、別のレンダリングを引き起こします。

編集

私の古い（間違ったが、今は修正された）答えは以下の通りですが、何か他のものは心に留めておきます。あなたはcomponentWillMountにcomponentDidMountを変更した場合、それはまだので約束の、二回レンダリングします：

weatherHelpers.getCityForecast(this.props.routeParams.city).then(... 

コンポーネントが最初にレンダリングされると、componentWillMountは、実行の約束を設定して、自分自身をレンダリングするでしょう。次に、約束が完了し、状態が更新され、状態の変化に基づいてレンダリングが再度実行されます。

Answer 2

私はcomponentDidMountでリクエストを送信し、応答を受け取ったときにコードを実行するように指示していると思います。

イベントを設定してコンポーネントをレンダリングします。応答が返ってくると、次に渡された関数が実行され、状態が更新されます。

この状態を小道具としてForecastコンポーネントに渡しています。これは、小道具が変更され、新しいレンダリングが発生したことに気づきます。