ReactJSのcomponentWillMountとcomponentDidMountの違いは何ですか？

（React.Component）でFacebookのドキュメントを確認しcomponentWillMountましたが、クライアント/サーバーで呼び出される方法とクライアントでcomponentDidMountのみ呼び出される方法が記載されています。componentWillMountサーバーには何をしますか？

componentWillMountは基本的にコンストラクターです。レンダリングに影響を与えないインスタンスプロパティを設定したり、ストアからデータを同期的に取得してsetStateを使用したり、コンポーネントの設定時に実行する必要があるその他の簡単な副作用のないコードを設定したりできます。

これが必要になることはめったになく、ES6クラスではまったく必要ありません。

constructorこの方法ではないと同じcomponentWillMount。

Reduxの作者によると、レンダリング中に状態が変化する可能性があるため、コンストラクタからアクションをディスパッチすることは危険です。

ただし、からの発送でcomponentWillMount結構です。

githubの問題から：

これは、1つのコンポーネントのコンストラクタ内のdispatch（）が別のコンポーネント内のsetState（）を引き起こしたときに発生します。Reactは、そのような警告の「現在の所有者」を追跡します。そして、技術的にコンストラクターがアプリケーションの他の部分の内部でsetState（）を引き起こす場合、コンストラクター内でsetState（）を呼び出していると考えます。これを処理する必要があるとは思いません。Reactが最善を尽くして仕事をしているだけです。解決策は、正しく指摘したように、代わりにcomponentWillMount（）内でdispatch（）を実行することです。

FakeRainBrigandが言ったことに追加するためcomponentWillMountに、サーバーとクライアントでReactをレンダリングするときに呼び出されますが、クライアントでcomponentDidMountのみ呼び出されます。

componentWillMountrenderコンポーネントのINITIAL の前に行われ、小道具を評価し、それに基づいて追加のロジックを実行するために使用されます（通常は状態も更新します）。したがって、最初のサーバー側レンダリングマークアップを取得するためにサーバー上で実行できます。 。

componentDidMountrenderDOMが更新されたときのイニシャルの後に実行されます（ただし、このDOM更新がブラウザーに描画される前に、DOM自体とあらゆる種類の高度なやり取りを行うことができるようになる前に重要です）。もちろん、これはブラウザ自体でのみ発生し、SSRの一部としては発生しません。サーバーはDOM自体ではなくマークアップのみを生成できるため、SSRを使用している場合はブラウザに送信された後に行われます。

あなたが言うDOMとの高度な相互作用？Whaaaat ?? ...はい-この時点でDOMが更新されたため（ただし、ユーザーはまだブラウザーで更新を見ていません）、を使用して実際のペイントを画面にインターセプトしwindow.requestAnimationFrame、実際の測定などを行うことができます。出力されるDOM要素。これを使用してさらに状態を変更できます。たとえば、可変長のコンテンツが不明な要素の高さをアニメーション化するのに非常に便利です（コンテンツを測定してアニメーションに高さを割り当てることができるため）。または、いくつかの状態変更中にコンテンツシナリオのフラッシュを回避します。

いずれにおいても、ガード状態の変化にかかわらず、非常に注意してくださいcomponentDid...状態変化も原因の再レンダリングされますので、無限ループを引き起こす可能性がありそうでないとして、ひいては他componentDid...と上と上と上

ドキュメントに従って（https://facebook.github.io/react/docs/react-component.html）

willで始まるメソッドは、何かが発生する直前に呼び出され、

didで始まるメソッドは、何かが起こった後に適切に呼び出されます。

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

ただし、「問題」があります。データをフェッチするための非同期呼び出しは、レンダリングが発生する前に返されません。つまり、コンポーネントは少なくとも1回は空のデータでレンダリングされます。

データの到着を待つためにレンダリングを「一時停止」する方法はありません。どういうわけか、コンポーネントタイムアウトからプロミスを返すことや、setTimeoutでラングリングすることはできません。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

コンポーネントはネイティブUI（DOMなど）にアクセスできません。また、まだ作成されていないので、子の参照にアクセスできません。componentWillMount（）は、構成を処理し、状態を更新し、一般的に最初のレンダリングの準備をする機会です。これは、prop値に基づいて計算またはプロセスの実行を開始できることを意味します。

componentWillMount（）の使用例

たとえば、コンポーネントが作成された日付をコンポーネントの状態で保持したい場合は、このメソッドでこれを設定できます。このメソッドで状態を設定してもDOMは再レンダリングされないことに注意してください。ほとんどの場合、コンポーネントの状態を変更するたびに再レンダリングがトリガーされるため、これは覚えておくことが重要です。

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

componentDidMount（）の使用例

たとえば、現在のニュースのデータをフェッチしてユーザーに表示するニュースアプリを作成していて、ユーザーがページを更新しなくても、このデータを1時間ごとに更新したい場合があります。

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()メソッドはクラスコンポーネントの現在のページのみを変更しますがComponentWillMount()、影響を受けるすべてのページを変更しますsetStates()