Reactで使うStateに関する基礎知識

はじめに

私が学んだstateについてのアウトプットです。

自分自身の健忘録であり、誰かの役に立てれば尚嬉しいです。

stateとは？

stateとは状態のことであり、可変のデータである。
stateが変更されると、仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画します。

またstateではlocal stateとglobal stateの２つに分けられます。

1. コンポーネントの中で管理する変数(local state)
2. Reduxを使うことでどのコンポーネントからも参照できる(global state)

なぜstateを使うのか？

render()内では無限に再レンダーされてしまうことを防ぐため、値を変更してはいけないというルールがあります。
そのため、render()内で値を変更するためには**setState()**を使って値を変更する必要があります。
そうすることで、ページリロードせずにコンポーネントを再描画し、表示を切り替えることができます。

どうやって使うのか？

まず、stateは基本的にfunctional componentでは使用できません。
そのため、class component内で、かつconstructor内で使用する必要があります。
(React Hooksを使えばfunctional componentでも使用できます)
記述方法はObject型です
書き方の例↓

class Qiita extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
      isPublished: false
     }
  }
  //中略
}
export default Qiita;

参考

https://ja.reactjs.org/docs/state-and-lifecycle.html
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
https://www.youtube.com/watch?v=j4t0aZge0Mc&t=194s