web-dev-qa-db-ja.com

Reactコンポーネント階層でのcomponentDidMountの順序

次の構造を持つReactアプリケーションがあります。

コンポーネント[〜＃〜] a [〜＃〜]は[〜＃〜] b [〜＃〜]と[〜＃〜]で構成されますc [〜＃〜]

コンポーネント[〜＃〜] b [〜＃〜]がcomponentDidMountメソッドを呼び出すと、これはすべてのコンポーネントがマウントを終了したということですか？

または言い換えるとツリー内のすべてのコンポーネントがマウントされた後にReact fire componentDidMountを実行しますか？

または例：コンポーネント[〜＃〜] b [〜＃〜]componentDidMountは、コンポーネント[〜＃〜] a [〜＃〜]がマウントされたときに呼び出されますか？

reactjsreact-fiber
10
zmii

ドキュメントによると、最初のマウントでのライフサイクルメソッドの順序は次のとおりです。

  1. コンストラクタ（）
  2. componentWillMount（）
  3. render（）
  4. componentDidMount（）

次のコンポーネントがあるとします。

_class A extends Component {
  render() {
    return (
      <div>
        <B />
        <C />
      </div>
    )
  }
}
_

[〜＃〜] a [〜＃〜]がマウントされると、componentDidMount()を起動します。それはレンダリング後に発生します。 Aのrender()が呼び出されるまでBとCは存在しないため、Aのマウントを完了するには、BとCがそれぞれのライフサイクルを完了する必要があります。 AのcomponentDidMount()は、BとCがマウントされた後に発生します。 AのcomponentWillMount()は、Aのrender()の前に起動されるため、BまたはCがマウントされる前にも起動されます

[〜＃〜]更新[〜＃〜]

React 16.3以降、componentWillMountはcomponentWillUpdateおよびcomponentWillReceivePropsとともに廃止プロセスを開始します。上記の例は、16反応の.xリリースですが、非推奨の警告が表示されます。非推奨のメソッドの代わりに、独自のライフサイクルを持つ新しいメソッドがあります。それらの詳細については component API docs をご覧ください。ここに- チートシート図 新しいライフサイクル

13
SrThompson

親のcomponentDidMountは、子の後にを起動します。

同様の問題： 親子コンポーネントがレンダリングされる順序は？

0
catamphetamine

React docs state：

マウントが発生する直前に、componentWillMount（）が呼び出されます。 render（）の前に呼び出されます...

各コンポーネントは独自のcomponentDidMountを起動します。 Aはそれ自身、次にB、Cになります。

したがって、あなたの質問に対する答えは、いいえ、すべてのコンポーネントがマウントを完了しているわけではなく、「マウントの直前」にライフサイクルメソッドを起動することです。

0
philipjc