脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

Reactのライフサイクル

Reactのライフサイクルに関して

var Life = React.createClass({

/* 描画前 ============================================================*/
    getDefalutProps(){
            /* 全体で一度しか呼ばれない */
            /* インスタンス作成時に親コンポーネントが値を指定しなかった時だけ、ここの値が使用される */
            /* 戻り値:Propsのキーと初期値(バリュー) */
    },
    getInitialState(){
            /* インスタンス作成毎に呼ばれる */
            /* 描画前にコンポーネントの状態を変更する最後のチャンス */
            /* 戻り値:Stateのキーと初期値(バリュー) */
    },
    componentWillMount(){
            /* 初回の描画時にのみ呼び出される */
            /* コンポーネントがページに追加される直前に呼び出される */
            /* 引数も戻り値もなし */
    },

/* 描画 ============================================================*/
    render: function(){
            /* 戻り値:ReactのElement */
    },

/* 描画後 ============================================================*/
    componentDidMount(){
        /* 初回の描画完了後に呼ばれる */
        /* ここではじめて実際のDOMの操作が出来る(React.findDOMNode(this)) */
    },


/* 再描画前 ============================================================*/
    componentWillReceiveProps(nextProps) {
        /* 引数 : 親から送られた値(props) */
        /* 親コンポーネントのstate等が変更されて、再描画が発生する際に呼ばれる */
        /* ただしこの時点ではthis.propsは変わっていない */
    },

    /* 再描画キャンセル */
    shouldComponentUpdate(nextProps, nextState) {
        /* falseを返すと、componentWillUpdateとcomponentDidUpdateとrenderをskipする */
        /* propsやstateが変わっても描画内容に変更がないとわかるときにパフォーマンスを早くするために使用 */
    },

    componentWillUpdate(nextProps, nextState){
        /* propsとstateの更新による再描画が行われる直前に呼び出される */
        /* stateやpropsは変更できない */
    },

/* 再描画後 ============================================================*/
    componentDidUpdate(prevProps, prevState){
        /* 再描画後に実際のDOMにアクセスするためのメソッド */
    },

/* コンポーネント破棄時 ============================================================*/
    componentWillUnmount() {
        /* コンポーネント削除時に呼び出される */
    },
});

各アクションで実行される順番

...正直ちょっと怪しい

メソッド 初回描画時 インスタンス作成時 再描画時 破棄時
getDefalutProps 1
getInitialState 2 1
componentWillMount 3 2
render 4 3 4
componentDidMount 5 4
componentWillReceiveProps 1
shouldComponentUpdate 2
componentWillUpdate 3
componentDidUpdate 5
componentWillUnmount 1