Reactのstateで詰まったところをまとめてみた

目的

Reactを勉強するにあたってstateについて詰まったところがいくつかあり、自分の理解度の確認のため。また、これから学ぶ方の参考になればと思います。

state

• コンポーネントの状態を保持するオブジェクトのこと。

profile1.jsと同じ内容をstateを使って書いたのがprofile2.jsになります。

profile1.js

class App extends Component {
    render(){
        var viewText = "プロフィール";
        return (
            <div>
                <p>このページは{viewText}です。</p>
            </div>
        )
    }
}

profile2.js

class App extends Component {
    constructor(props){
        super(props);
        this.state = { viewText : 'プロフィール' }
    }
    render(){
        return (
            <div>
                <p>このページは{ this.state.viewText }です。</p>
            </div>
        )
    }
}

profile2.jsでは、classにconstructor()メソッドを追加して、this.stateにオブジェクトとしてstateの初期値を定義します。ES6では、super()メソッドを呼び出すようにするのが決まりのようです。

props

• 親コンポーネントから子コンポーネントに渡される値のこと。

profile2.jsではviewTextというプロパティを持っています。

stateを使うことでpropsで流し込むことができるので、画面の(再)描画ができるようになります。
また、propsはプロパティとして渡した値しか影響は受けないため、複雑で巨大なコンポーネントでもそれぞれ独立に、安心して使うことができます。

まとめ

正直、初めは変数で呼び出したほうが早いのに、、と思っていましたが、コンポーネントが複雑になり受け渡しがうまくいかなかった場合の対処が果てしないように思えましたし、それほどコードも読みにくくならないのでstate,propsを使って書いた方がいいと思いました。
まだまだ自分も知識が浅いので、もっと勉強して早くReactを使いこなせるようになります。