【React⑤】State

#Stateとは
* コンポネント内で状態を管理する変数（Local State）
* Reactではコンポネントの内部で状態を保つことができる
* Propsは親コンポネントから値を渡されたのに対して**Stateはコンポネントの内部でのみ使用**される
* Propsは変更不可(immutable)に対してStateは**変更可能(mutable)**
* Stateは**Class Component**で使う

propsについては以下参照
https://qiita.com/suema0331/private/ba7b0bd5521571df0c49
>* Propsとはコンポネントの属性、あるデータの属性で参照できるもののこと
>* {}で囲って渡していく
>* 受けわたせるデータ型は文字列、数値、真偽、配列、オブジェクト、変数などなんでも可能

### Stateを使う理由
* render()内部では値を変更してはいけない<br>
→renderするとstateが変わって再レンダーされてまたstate変わって再レンダー∞💥😇
* setState()で値を変更する
* stateの変更が起こると再レンダーする<br>
→そのためページリロードせずDOMが変わるので表示を切り替えられる


#Stateの使い方
* Class Componentのconstructor()内で以下のように宣言
* オブジェクト型で書く
* 取得時には同じコンポネント内では`this.state.key`で取得可能
* 子コンポネントとして参照したいときはpropsとして渡す
* renderのなかで`toggle = {this.togglePublished()}`のように渡すと関数が実行されてしまう！<br>
→関数がtoggleで呼び出された時に実行されるようにする必要

##setStateでStateを変更する
* 関数にラップして使う
* setState()内に記述されたstateのみ変更
* 複数のstateを設定した場合でも、isPublishedのみ変更される

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

**※注：下のように直接初期化したstateを変更してはいけない**
状態を変え、DOMも更新したいので、setStateを使うことで状態を変えた時に自動でrenderが実行される。

```React
this.setState({count: this.state.count +1 })
//this.state = {count: this.state.count +1 } NG!!!
```

**renderの内で関数をtoggleで呼び出された時に実行されるようにする例**
`Article.jsx`の`onClick`で`props.toggle`関数を呼び出した時に
`toggle`という`props`を関数で渡す。

```React:Blog.jsx
import React from 'React';

class Blog extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            isPublished:false,
            order=1
        }
    }

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

    render(){
        return(
            <>
                <Article title={"React"} 
                        isPublished={this.state.isPublished}
                        //toggleというpropsを関数で渡す必要
                        toggle = {() => this.togglePublished()}
                />  
            </>
        )
    }
}

export default Blog
```

```React:Article.jsx
import React from 'React';

//公開状態のcheckbox
//onClickでprops.toggle関数を呼び出す

const Article = (props) =>{
    return(
        <div>
            <h2>{props.title}</h2>
            <label htmlFor="check">公開状態： </label>
            <input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()}/>
        </div>
    )
};

export default Article
```



#setStateを使ってカウントボタン作成

* `this.state={count:0}`初期化時にstate宣言
* handlePlusButtonメソッドの中でstateを変更

```React
import React, {Component} from 'react';

const App = () => ( <Counter></Counter> )

class Counter extends Component {
 constructor(props){    //初期化処理で実行されるメソッド
  super(props)          //親クラスで初期化処理を行う
  this.state={count:0}  //オブジェクトがstateに設定される
 }

  handlePlusButton = () => { //handlePlusButtonメソッドの中でstateの値を+1する
    this.setState({count: this.state.count +1 })//状態を変更するメソッド}

handleMinusButton = () => {
    this.setState({count: this.state.count -1 })
}

 render (){  //render関数を呼んでreturnのなかでcounter文字列を返す
  return(    //returnするJSXは一個でないといけない
  <React.Fragment>　 
     <div>count: {this.state.count }</div>
     <button onClick={this.handlePlusButton}>+1</button>  
     <button onClick={this.handleMinusButton}>-1</button>  
  </React.Fragment>
  )
}
}
export default App;
```