290
228

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 と Props の違い

Last updated at Posted at 2016-04-26

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 で受け取るべきです。

290
228
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
290
228

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?