reactのstateとpropsの違いについて

Question

react.jsを少し学び始めたばかりなのですが、stateとpropsには例えば、それぞれ、どんな値が入るのですか？

両者の違いについては、いろんなサイトの記事を読んで、だいたい理解はしたものの、具体的にstateとpropsには実際のよくあるようなアプリケーションではどんな値が入るのかを知りたいです。

よろしくお願い致します！

state

どのように表示するかに関係ある情報を持たせる？

isHiddenみたいな表示中か表示中かを表す情報やheightやwidthなどの情報？

props

何を表示するかに関係ある情報を持たせる？
名前や性別、記事の内容、todoの名前など？

Answer 1

私も学び始めたばかりなので実践的ではないのですがオライリーの「Reatビギナーズガイド」によると

• props

コンポーネントの呼び出し側がコンポーネントに対して与える属性。
コンポーネントの初期表示値、また、コンポーネントの処理で必要となる値

• state

コンポーネントの現在の値。valueなどの値はReactが管理しているのでtextareaなどであれば自動的に更新されます。アプリケーションで直接更新する場合はいかなるイベントが発生しても自分で整合性をもって保守する必要があるとのことです。また、stateの更新においてはsetState関数にて実施する必要があり直接更新してはならないとのこと。これはstateの更新によって再レンダリングが必要かReactが判断しているためで、この処理に不整合が生じる可能性があるためです。

ということでpropsは初期値、stateは現在値と私は理解しています。

Comments

[退会済みユーザー]

回答ありがとうございます！
まだ手を動かしてないので、明日reactやってみます！

Answer 2

https://facebook.github.io/react/docs/state-and-lifecycle.html

While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that is not used for the visual output.

If you don't use something in render(), it shouldn't be in the state.

公式ドキュメントにわかりやすい指標が書かれていました。