13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-12

目的

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を使いこなせるようになります。

13
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?