web-dev-qa-db-ja.com

React props：オブジェクトまたはそのプロパティを渡す必要がありますか？大きな違いはありますか？

小道具を渡すとき、オブジェクト全体を子コンポーネントに渡すか、最初に親コンポーネントで小道具を個別に作成してから、それらの小道具を子に渡す必要がありますか？

オブジェクト全体を渡す：

<InnerComponent object={object} />

最初に必要な小道具を個別に作成します。

<InnerComponent name={object.name} image={object.image} />

どちらが推奨され、それが依存する場合、どちらを使用するためのゲージとして何を使用すればよいですか？

javascriptreactjsreact-props
17
catandmouse

小道具を個別に渡す2番目の例を優先する必要があります。ここでは、渡された引数を明示的に確認でき、予想される引数とすばやく比較できます。これにより、人とのコラボレーションがはるかに簡単になり、アプリケーションの状態がより明確になります。

個人的には、オブジェクトが必要ない場合は、オブジェクト全体を渡さないようにしています。これは、内部にプロパティを含めることができるスプレッドオペレーターのようなものであり、より大きなスコープでデバッグするのははるかに困難です。

prop-typesやTypeScriptのような純粋な反応へのいくつかの追加は、大きなアプリケーションで明確で期待されるプロパティを定義するのに役立つかもしれません

8
mstruebing

JavaScriptには型注釈がないため、@ mstruebingで言及されているように、コードの保守性が向上するため、2番目の選択肢の方がはるかに望ましいでしょう。ただし、TypeScript React（型注釈をサポート）を使用している場合）はどちらも同じように明確です。ただし、最初の選択はビューとモデル間の密結合を促進し、これによりあまり入力する必要がないため、開発が高速です。2番目の選択では開発が遅くなる可能性がありますが、将来の変更に対する柔軟性と許容度は高くなります。

したがって、ゲージは次のとおりです。柔軟性より開発速度を優先する場合は、選択肢1に進んでください。開発速度よりも柔軟性を優先する場合は、選択肢2に進んでください。

追記

さて、柔軟性よりも開発速度を優先すべきでしょうか？これが私の2セントです。

プロジェクトが短期的な使用を目的としたものである場合（たとえば、選挙中に投票を収集するためだけにアプリを開発するなど）、最初の選択肢に進みます。

プロジェクトが長期間の使用を想定している場合（たとえば、オンライン銀行取引ポータル）、2番目の選択肢を選択する必要があります。

5
Wong Jia Hau

最小特権の原則 によると、これは正しい方法です。

<InnerComponent name={object.name} image={object.image} />

これにより、InnerComponentが誤って元のオブジェクトを変更したり、意図されていないプロパティにアクセスしたりすることがなくなります。

または、プロパティを元のオブジェクトから選択して、小道具として渡すこともできます。

<InnerComponent {...pick(object, 'name', 'image')} />

リストするのが面倒なプロパティが多数ある場合は、オブジェクトを受け入れる単一のプロップがある可能性があります。

<InnerComponent object={pick(object, 'name', 'image')} />
4
Estus Flask

オブジェクト内のすべてのプロパティを使用しない場合は、ChildコンポーネントがPureComponentを使用する場合のパフォーマンスの最適化に役立つため、必要なプロパティを個別に渡すことをお勧めしますshouldComponentUpdate。このような場合、Childコンポーネントで使用される小道具が変更された場合にのみ再レンダリングされ、オブジェクト内の未使用のプロパティが変更された場合は再レンダリングされません。

ただし、オブジェクト内のすべてのプロパティを使用している場合、オブジェクトの変更を正しく処理すれば、オブジェクトを小道具として受け渡しても、大きな違いはありません。

2
Shubham Khatri

子コンポーネントに複数の小道具を渡すことは、子コンポーネントに小道具を渡す好ましい方法です。これは、子コンポーネントでアプリケーションの状態を追跡するのに役立ちます。また、prop-typesモジュール。これは、Javaのジェネリックのように機能し、プロップが渡すタイプセーフを提供します。

2
Souvik Dey

それはそのオブジェクトに依存します。すべてのプロパティを別のコンポーネントに渡す必要がありますか？または...特定のコンポーネントに5つのうち2つのプロパティを渡す必要がある場合がありますか？

  • すべてのプロパティを渡す必要がない場合は、PropertiesをPropsとして渡すことをお勧めします
  • ただし、すべてのプロパティを渡す必要があることを100％確信している場合は、Object全体をPropsとして渡すことをお勧めします。この場合、コードがより明確になり、何かを渡すことを忘れないように。例えば;そのオブジェクトに新しいプロパティを追加するとき、オブジェクト全体を既に渡しているので、それを渡す必要はありません！

まあ、すぐにいくつかのプロパティを除外する必要があるかもしれないので、そのオブジェクトの現在/将来の目的がわからない場合は、おそらくその場合、いくつかの未使用のプロパティを他のコンポーネントに渡すのではなく、そのプロパティを個別に渡す必要があります。

1
Elharony