require（）とpropまたはcontextを介してオブジェクトを渡すことの相違点

Question

シングルトンを差し引いてReact propまたはcontext経由で渡すのとは何ですか？

それぞれのユースケースは何ですか？

Answer 1

モジュールrequire()（またはimport）のモジュールでは、どのコンポーネントでも同じオブジェクトが取得されます。コードコンポーネントため
使用モジュールによって異なります

• その他部品（Button）。
• ユーティリティ機能（getTextColor）。
• グローバルデータストレージ（CommentStore）。

モジュールをインポートするのは、非常に簡単で、一度だけ行うだけです。

モジュールをインポートする際の欠点は、は、それが指す内容をに上書きすることができないことです。したがって、たとえば、テスト中にCommentStoreまたはgetTextColorモジュールを交換することや、「リビングデザインガイド」を簡単に交換することはできません。ユースケースによっては、これが問題になる場合もあれば、そうでない場合もあります。

---

プロップとして何かを渡すことは、いつも別のものを渡すことを意味します。

• データ（comment）：カスタマイズする必要があなたのコンポーネントへ入力ため
  使用の小道具。
• イベントコールバック（onClick）。
• UIプロパティ（color）。

小道具を使用するのは、明示的かつカスタマイズ可能であるということです。彼らは疑問がある場合にはのデータを受け渡しする主なメカニズムです。小道具を使用してください。

小道具を使用することの欠点は、小道具を使用していない中間部品を使って多くの小道具を渡すことがあることです。 通常、これはReactでうまくいきます。なぜなら、バグを見つけやすくするために冗長に扱われているからです。しかし、場合によっては、それはイライラすることができます。

---

コンテキストは、高度なAPIであると控えめ非常にを使用する必要があります。
今後大幅に変更される可能性があります。

• テーマ設定（currentTheme）：

  コンテキストは、サブツリーの「グローバル」となって、暗黙的に渡された小道具のようなものです。

• ロケール（currentLanguage）。（store）。

propsを超える利点は、すべてのコンポーネントを手動で渡す必要がないということです。インポートの利点は、コンポーネントの外からオーバーライドできることです。これは、テスト、サーバーレンダリング、および変更されたものに対して便利です。

contextの欠点は、severe issues with updatesであることです。したがって、は、その値を正しく更新することに依存しません。。たとえば、store自体は決して変更されず、独自のサブスクリプションメカニズムを持っているため、React Reduxはstoreを安全に通過できます。

一般的にのアプリケーションコードでcontextを使用することは推奨されません。一部のライブラリでAPIを使用すると、APIが変更されたときに移行が容易になるので便利です。

---

最後に、私は自然の画家ないんだけど、ここでそれをまとめるための落書きです：