はじめに

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

Stateについて

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

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

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

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

クラスの書き方


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

React.Componentを継承するクラスを定義（ここではクラス名をClockとしている）
render(){}と呼ばれる空のメソッドを追加する。
render(){}の{}の中にreturn();を追加する。
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')
);

コード１のthis.propsをthis.stateに変更する。
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')
);

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

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