入れ子のReact.ComponentでcomponentWillMountとcomponentDidMountが呼ばれる順番。

バケツリレーを楽しんでいたところ、順番に起因する失敗をしたので、残しておきます。

単純なピラミッド

<Top>
  <Middle>
    <Content/>
  </Middle>
</Top>

浅い方からcomponentWillMountが呼ばれ、深い方からcomponentDidMountが呼ばれます。

  1. Top
  2. Middle
  3. Content
  4. ここからcomponentDidMount
  5. Content
  6. Middle
  7. Top

並列のコンポーネントがある場合

<Top>
  <A/>
  <Middle>
    <Content/>
  </Middle>
  <B/>
</Top>

上から順番に、浅い方からcomponentWillMountが呼ばれ、上から順番に、深い方からcomponentDidMountが呼ばれます。

  1. Top
  2. A
  3. Middle
  4. Content
  5. B
  6. ここからcomponentDidMount
  7. A
  8. Content
  9. Middle
  10. B
  11. Top

並列はそのまま、深さ基準では逆転という感じです。