ReactコンポーネントのcomponentDidMountでajaxリクエストを行う必要があるのはなぜですか？

Question

リアクション文書には、ライフサイクルイベント react docs（ react docs）からajaxリクエストを開始する必要があることが記載されています。

なぜこのイベントですか？

AJAXを使用してデータをロードする際、ほとんどのケースでは、私はロードバーのいくつかの種類を表示したい、例えば：

componentDidMount() { 
    this.setState({isLoading: true}); 
    fetch(...) 
     .then(...) 
     .then(() => this.setState({isLoading: false}) 
} 

が、これはrender方法を3回発射（immediatellyその後、isLoading = trueを設定することが続き、レンダリング初期componentWillMountイベントからAJAX要求を送信することについて間違って何isLoading = false

で？

Answer 1

まあ、isLoading: trueは初期状態、不要の一部とすることができますコンポーネントがhttps://github.com/reactjs/react-redux/issues/210によると=>のみ2レンダリングではなく、3

をマウントした後、それを設定するには、componentWillMountから一度だけrenderを呼び出した結果はsetStateが非同期render後に呼び出されます場合は、それがいずれかを持っていないことを意味します効果（私がコメントを正しく理解していれば）。

setStateのコールバックがrenderより前に実行される可能性があるかどうかわからないため、ロードする画面は表示されず、結果のみが表示されるため、ときどき（実際にはDEVの場合）デバッグに非常に厳しいレースコンディションになり...

もhttps://facebook.github.io/react/tips/initial-ajax.html

Answer 2

ポイントを参照してください、あなたはあなたがロードバー（ロード：true）を参照するようにコンポーネントが初期状態でレンダリング反応させています。

componentWillMount（）でthis.setState（{isLoading：true}）行を移動できます。 componentWillMountの設定状態ではコンポーネントの再レンダリングが行われません。レンダリングメソッドは更新されたコンポーネントを取得します。