Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@ryuprogramSA

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

はじめに

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

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

stateとは?

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

またstateではlocal stateとglobal stateの2つに分けられます。
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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?