【React】propsとstateの違い

props

• 親コンポーネントからもらうデータ
• 読み取り専用で変更することはできない

state

• コンポーネントが持つデータ
• 変更が可能
• コンポーネント内のプライベート変数のようなもの
• 他のコンポーネントはアクセスすることができない

親からもらうデータを加工したい

親からもらうデータを加工したい時はstateに格納すればいい。

// 親コンポーネント
<Counter number={7}>

// 子コンポーネント
state = {
  numberFromParent: this.props.number
}

初期値を別に設定したい時は、任意の関数内でsetStateを使えばいい。

// 親コンポーネント
<Counter number={7}>

// 子コンポーネント
state = {
  numberFromParent: 0
}

// クラスのインスタンメソッドとして定義。この書き方はbabelによってコンパイルされるため、正式なJSの記法ではない。
doubleNumberFromParent = () => {
  const newNumber = this.props.number * 2
  this.setState({numberFromParent: this.state.numberFromParent + newNumber})
}

上のコードではsetStateの引数にオブジェクトを渡している。setStateにオブジェクトを渡すと最新のstateであることが保証されていないので注意が必要だ。参考 : ReactのsetStateについて整理してみた - Qiita