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

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React における State と Props の違い

More than 5 years have passed since last update.

State と Props の違いと、使い分けについて。ほぼこちらの日本語訳です。

State と Props

React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。
この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。

  • State: そのコンポーネントが持っている状態
  • Props: 親コンポーネントから渡されたプロパティ

State (状態)

  • mutable data (可変のデータ)
  • maintained by component (コンポーネントによって保持)
  • can change it (変更可)
  • should be considered private (プライベートであるべき)

State は可変のデータです。State の変更は、仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法となっています。

State はコンポーネント自体によって保持され、コンポーネントからコンポーネントへは渡されません。
State は、UI に関連した状態(ドロップダウンが開いているか閉じているかなど)、または、外部のデータに関連する状態(現在ログインしているユーザの名前など)のいずれかになりえます。(この辺日本語訳あやしい...)

State の値は、this.setState()をコンポーネント内で呼び出すことによって更新されます。これが呼び出されると、既存の State を新しい State で置き換えられ、そしてコンポーネントのrender()メソッドが実行されます。

Props (プロパティ)

  • immutable data (不変のデータ)
  • passed in from parent (親から渡される)
  • can't change it (変更不可)
  • can be defaulted & validated (デフォルト値の設定と検証が可能)

Props は、一般的に、親コンポーネントから子コンポーネントに渡される値です。
次の JSX のコードでは、textonClick が Button コンポーネントに渡される Props です。

<Button text="click me" onClick={ this.clickHandler } />

Props は不変のデータとして扱われ、getDefaultProps で定義されたデフォルト値か、親コンポーネントから渡された値のどちらかを持つことになります。

State と Props の使い分け

コンポーネントは必要に応じて内部の State を自由に使用できますが、良い UI 体験のために、直接外部の State に接続する場合には Props で受け取るべきです。

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
人と人をつなげる Empowering the people to connect.


No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Help us understand the problem. What is going on with this article?