LoginSignup
5
3

More than 3 years have passed since last update.

React PropsとStateとstoreの使い分けについて

Last updated at Posted at 2020-01-14

Reactでコードを書いている中で、情報の管理をするPropsとStateをよく使っていますが、それ以外にstoreもあると知り調べてみました。

PropsとState

ReactのコンポーネントではPropsとStateと呼ばれる値でUIの状態や情報を管理しています。

Props
コンポーネント利用時に属性として設定できる値

state
コンポーネントが持っている状態
stateはclass componentだとsetStateでデータを更新することができる。注意しなければいけないのは、Stateの値を更新するとコンポーネントのrender()メソッドが実行され再描画でされます。
(stateはcomponentだけが持つ値。)
他のcomponentに値をわたす必要がない、そのcomponentだけで利用する値に関してはstateを使って値の管理をする。

store

storeはreduxが管理してる値です。アプリケーションの状態(state)を保持します。

使い分け

app全体で管理したい値はstore管理、コンポーネント毎に管理したい値はprops or stateで管理する。
stateの値を呼び出したcomponentに渡して、その値をまた別のcomponentに渡してを続けること(バケツリレー)が不毛だからstoreが生まれて、バケツリレーしなくても値を取得できるようになりました。

参考
http://yucatio.hatenablog.com/entry/2018/09/21/225716

5
3
2

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
5
3