Reactのコンポーネントを設計する際、PropとStateの違い、Refの使いどころなどに悩むことがあります。 この記事では、この3つについてまとめてみました。

Prop

Propは、コンポーネントの属性を表します。 値を親コンポーネントから受け取り、コンポーネント作成時にセットします。

PropはImmutableで、コンポーネント作成後は値を変更することができません。

Propは「値を受け取る」という性質上、コンポーネントのインタフェースといえます。 Propが多すぎる場合は、責務の観点からそのコンポーネントが持つべきインタフェースかどうかを考え、必要に応じてコンポーネントを分割することも検討しましょう。

React.propTypesを定義することで、インタフェースを把握しやすく、また渡された値を検証することができます。

State

Stateは、コンポーネントの状態を表します。 コンポーネント作成時に初期値をセットします。

StateはPropと対してMutableであり、コンポーネント作成後に値を変更できます。

ステートフル、つまりコンポーネントがたくさんのStateを持っているということは、その分だけそのコンポーネントが複雑であることを意味します。 必要最低限だけのStateを持つようコンポーネントを設計しましょう。

Ref

Refは、同一コンポーネント内の参照を表します。 renderメソッド内で、ref属性により名前をセットします。

Refはコンポーネントを操作するのに役立ちますが、一方でReactの「単一方向のデータフロー」という特徴を遠ざける可能性もあります。 本当に必要なケース以外では使わない方がいいでしょう。

設計方針

以上を踏まえると、コンポーネントでのProp/State/Refは、次の方針をもとに設計した方がよいと思います。

  • Propの定義はコンポーネントの責務をもとに行なう
  • Propを定義する際はReact.propTypesでインタフェースを明確にする
  • Stateの数は可能な限り少なくする
  • Refは可能な限り使わない

あわせて読みたい

おわりに

Reactのコンポーネントを設計する際、Prop/State/Refを適切に使うことで、クリーンなコードにつながると思います。 設計の際の参考になれば嬉しいです。