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

2016-03-25

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

単純なピラミッド

<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

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