BETA

親のcomponentDidMountと子のcomponentDidMountのどちらが先に動くかについて。

投稿日:2019-09-10
最終更新:2019-09-10

答え:子供のcomponentDidMountが先に動く

親子三代のこのコードのcomponentDidMountは

import React, { useState, useEffect } from "react";  
import { StyleSheet, Text, View, Button } from "react-native";  

export default function App() {  
  return (  
    <View style={styles.container}>  
      <Parent />  
    </View>  
  );  
}  

function Parent() {  
  useEffect(() => {  
    console.log("parent");  
  }, []);  
  return <Child />;  
}  

function Child() {  
  useEffect(() => {  
    console.log("child");  
  }, []);  
  return (  
    <View>  
      <GrandChild value={1} />  
      <GrandChild value={2} />  
      <GrandChild value={3} />  
    </View>  
  );  
}  

function GrandChild({ value }) {  
  useEffect(() => {  
    console.log(`grand child: ${value}`);  
  }, []);  
  return (  
    <View>  
      <Text>value: {value}</Text>  
    </View>  
  );  
}  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    backgroundColor: "#fff",  
    alignItems: "center",  
    justifyContent: "center"  
  }  
});  

この出力結果になる。

grand child: 1  
grand child: 2  
grand child: 3  
child  
parent: 0  

componentDidMountについて> https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount

今回はreact hooksの勉強もかねてuseEffectで実装したが、class componentのcomponentDidMountと同様の結果が得られた。

\\ useEffectの第二引数に空の配列を渡すと、最初のrenderが行われた後に第一引数のコールバックが実行される。  
useEffect(() => {  
    console.log('componentDidMount')  
}, [])  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@moeka802の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!