React基礎③「Stateとライフサイクル」

はじめに

Reactホームページの内容と付け加えて学んだことを備忘録として書き残す。

Stateについて

stateとは：コンポーネントの完全に独立した値。

値が変更されるとrenderが行われる。

ライフサイクルを使用するにあたって

ライフサイクルはクラス定義によって作られたコンポーネント のみ使用できる。

クラスの書き方

//コード１
class Clock extends React.Component{
    render(){
        return(
            <div>
                <h1>It is {this.props.date.toLocaleTimeString()}.</h1>
            </div>
        );
    }
}

1. React.Componentを継承するクラスを定義（ここではクラス名をClockとしている）
2. render(){}と呼ばれる空のメソッドを追加する。
3. render(){}の{}の中にreturn();を追加する。
4. return();の()の中に表示内容を書いていく。

※注意点：render()の中で使われるpropsなどはthis.propsとする。

ここでコンポーネントをClassで作ることで同一DOM内で
あるクラス（設計図）をもとに作ったインスタンス（実物）が
1つだけになるので、stateやライフサイクルが使える。

stateの追加

//コード2
class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    render(){
        return(
            <div>
                <h1>It is {this.state.date.toLocaleTimeString()}.</h1>
            </div>
       );
    }
}

ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
);

1. コード１のthis.propsをthis.stateに変更する。
2. this.stateの初期状態をコンストラクタで設定する

//コード3
constructor(props){
    super(props);
    this.state = {date: new Date()};
}

※注意点：コンストラクタではsuper()によって親要素のコンストラクタ
を呼び出すのが必須である。

クラスにライフサイクルメソッドを追加

ライフサイクルはリソースの開放をしリソースを無駄なく使うための
メソッド。コンポーネントのデータの更新をし画面上に表示させるまでの
一連の流れを示します。

＜実際の流れ＞
Mounting→Updating→Unmounting

• Mounting
  
  クラスがDOMとして描画するための準備。
• Updating
  
  描画されており、ユーザーが編集できる期間。
• Unmounting
  
  コンポーネントが破棄される際にコンポーネントが占有していた
  リソースの開放を行う。

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    
    componentDidMount(){
        this.timerID = setInterval(
            ()=>this.tick(),1000
        );
    }
    
    componentWillUnmount(){
        clearInterval(this.timerID);
    }
    tick(){
        this.setState({
        date: new Date()
        });
    }
    
    render(){
        return(
          <div>
            <h1>It is{this.state.date.toLocaleTimeString()}.</h1>
          </div>  
        );
    }
}

ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
);

1. </Clock>がReactDOM.render()に渡されると
   まず、ReactはClockコンポーネントのコンストラクタの呼び出しをする。
   コンストラクタではthis.stateの初期化を行っている。
2. render()は画面に出力する項目を指定している。
   Clockコンポーネントのrender()を呼び出すことで、Reactは画面に表示すべき項目を
   知ることができる。DOMをClockのrender出力と一致するように更新する。
3. Clock の出力が DOM に挿入されると、React は componentDidMount() ライフサイクルメソッドを呼び出します。
   その中で、Clock コンポーネントは毎秒ごとにコンポーネントの
   tick() メソッドを呼び出すためにタイマーを設定するようブラウザに要求します。
4. ブラウザは、毎秒ごとにtick()メソッドを呼び出す。
   その中でClockコンポーネントは現在時刻を渡したsetState()メソッドを
   呼び出すことで、UIの更新を予約する。Reactはstateが変化したことを確認し、
   render()メソッドで再度何を画面上に表示すべきなのかを判断する。
   その変更に応じてReactはDOMを更新する。
5. ClockコンポーネントがDOMから削除された場合は、ReactはcomponentWillUnmount()ライフスタイルメソッド
   を呼び出しリソースの開放を行う。