React(コンポーネントの状態 = stateの設定と取得) とらゼミ05 メモ

状態(state)とは

• コンポーネント内で管理する変数。
• local state 呼ばれる。
• propsとして子コンポーネントに渡せる。

何故stateを使うのか

• renderメソッドの中では値を変更してはいけない。 (無限ループになる可能性があるから)
• setState() セッターで値を変更する。
• stateの変更 = 再レンダーのきっかけ => ページリロードせずに表示を切り替えられる。

レンダリング/レンダー(render)とは : webブラウザのウィンドウ内にページ内容の描画を行うことを言う。とらゼミ01でも解説済み。

stateの設定方法

• functional componentはstateを持つことができないので、class componentが前提となる。
• constructor内で宣言する。
• オブジェクト型で記述。

例)

class Blog extends React.Component {
    // コンストラクタ
    constructor(props){
        super(props)
        this.state = {
            isPublished : false
        }
    }
}

export default Blog;

stateの取得

• 同一コンポーネント内で取得するなら this.state.isPublished (コンポーネント内の変数内なのでthisをつけた後、stateのオブジェクトのキーであるisPublishedをつける)。
• 子コンポーネントで参照したい場合はpropsとして渡す。

子コンポーネントに渡す例)

class Blog extends React.Component {
    // コンストラクタ
    constructor(props){
        super(props)
        this.state = {
            isPublished : false //stateの値。
        }
    }
    // renderメソッド
    render(){
        return(
            <>
                <Article 
                    title="React" 
                    order={100}
                    isPublished={this.state.isPublished} //stateを渡す。
                />
            </>
        )
    }
}

export default Blog;

子コンポーネント側の受け取る例)

import React from 'react'

const Article = (props) => {
    return (
        <div>
            <h2>{props.title} + {props.order}</h2>
            <label htmlFor='check'>公開状態</label> //ラベル設定は htmlForで行う。
            <input type='checkbox' checked={props.isPublished} id='check'/>
        </div>
    )
}

export default Article;

これだとcheckboxに対するcheckedのstateがfalseのままなので永遠にクリックできない、なのでstateの値を変更する必要がある。

stateの変更方法。

• setState()を使う。
• 関数にラップするのが一般的。
• setState内に記述されたstateのみを変更。

例) render関数と同じファイルに記述。

togglePublished = () => {
        this.setState({
            isPublished : !this.state.isPublished
        })
    }

これを子コンポーネントで使うためには関数毎渡してやる必要がある。
アロー関数の形で渡す必要がある。

例)

render(){
        return(
            <>
                <Article 
                    title="React" 
                    order={100}
                    isPublished={this.state.isPublished}
                    toggle={() => this.togglePublished()} // アロー関数。
                />
            </>
        )
    }

何故関数は関数の形で渡してあげなければならないか？

render(){
        return(
            <>
                <Article 
                    toggle={this.togglePublished()} //　ここ
                />
            </>
        )
}

この形で渡してしまうと、この時点で関数が実行されてしまい、その時点でstateが変更され無限レンダーに入ってしまうので、toggleを実行すると関数が実行されると言う形で渡す。

stateを子コンポーネントで受け取る。

const Article = (props) => {
    return (
        <div>
            <h2>{props.title} + {props.order}</h2>
            <label htmlFor='check'>公開状態</label>
            // onClickの関数として受け取る。 
            <input type='checkbox' checked={props.isPublished}  onClick={() => props.toggle} id='check'/>
        </div>
    )
}

再び無限レンダーを避けるため、onClickを発動した時関数が実行されるようにする。
onClick実行 -> toggle関数実行 -> togglePublished関数実行 -> setState()実行 -> state変更。