エンジニア日記

日々の開発あれこれ

React Native Life Cycle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';

export default class sampleClass extends Component {

    // コンストラクタ
    constructor(props) {
        super(props);

        this.state = {
            hoge: null
        };
    }

    // マウント時マウントされるときに1度だけ実行され、
    // 以降は実行されない
    componentWillMount(){
        // render()直前の処理。
        // setStateを行うとrenderは更新されたstateを
        // 参照する。
    }

    // 描画処理
    render() {
        return (
            <View></View>
        );
    }

    // マウント時マウントされるときに1度だけ実行され、
    // 以降は実行されない
    componentDidMount(){
        // render()直後の処理。
        // setStateを行うとrenderが再実行されるので、
        // 行わない方がいい。
    }


    // ------------------------------------------
    // 更新時ライフサイクルメソッド ここから
    // ------------------------------------------

    // 新しいpropsを受け取ると実行
    // 引数に受け取る
    componentWillReceiveProps(nextProps){
        // 更新時ライフサイクルメソッドでsetState()を
        // 実行できるのはここだけ。
    }

    // stateが更新されると実行
    shouldComponentUpdate(nextProps, nextState){
        // パフォーマンス・チューニング時は特に意識する。
        // falseを返すと、以降のcomponentWillUpdate(), render(), componentDidMount()の処理が
        // スキップされる。

        return true;
    }

    componentWillUpdate(nextProps, nextState){
        // 再render()直前の処理。
        // 変更前後のprops、stateを参照し処理を行える。
        // render()処理に移る直前にprops、stateの値が更新される。
    }

    componentDidUpdate(prevProps, prevState){
        // 再render()直後の処理。
    }

    // ------------------------------------------
    // 更新時ライフサイクルメソッド ここまで
    // ------------------------------------------


    // アンマウント時に実行
    componentWillUnmount(){
        // タイマー停止などの後始末処理を記述する。
    }
}

AppRegistry.registerComponent('sampleClass', () => sampleClass);