React.jsまたはReactNativeを使用していると、コンポーネントに付属している✨magic✨と柔軟性にすぐに気付くでしょう。 コンポーネントは、ユーザーインターフェイスを再利用可能なコードに分割することで時間を大幅に節約し、コンポーネントアーキテクチャにより、コードの読み取りと理解が容易になります。

コンポーネント組織を次のレベルに引き上げる

これらのアイデアをさらに進めるために、コンポーネントを2つのカテゴリに分類できます。 これらの2つのカテゴリには、概念がわずかに異なるいくつかの名前がありますが、すべて同じコアアイデアを共有しています。 コンポーネントを分割するという当初のアイデアは、Dan Abramovによって考案されたもので、彼はそれらをスマートでダムと呼んでいましたが、後でそれらをコンテナおよびプレゼンテーションコンポーネントと呼ばれるように改訂しました。

この概念は、Reactコミュニティによって採用され、拡張されています。 スマートでダム、コンテナやプレゼンテーション以外に、機能コンポーネントやクラスコンポーネント、ファット＆スキニー、スクリーンやコンポーネントなどとして聞いたことがあるかもしれません。 この記事では、それらをスマートでダムなコンポーネントと呼びます。

コンポーネントをスマートまたはダムにするものは何ですか？

スマートコンポーネントは、機能を実行してデータを管理するアプリレベルのコンポーネントですが、ダムコンポーネントはUIのみに焦点を当てています。

スマートコンポーネントとダムコンポーネントの特徴を明確にする前に、以下のサインアップフォームのどのコンポーネントがスマートと見なされ、どのコンポーネントがダムと見なされるかを考えてみてください。

🤓スマートコンポーネントは、の動作に重点を置いています。

スマートコンポーネントの一般的な特徴は次のとおりです。

  • データの操作スマートコンポーネントは、変更をフェッチ、キャプチャし、アプリケーションデータを渡すことができます。
  • Redux、ライフサイクルメソッド、API、ライブラリなどを呼び出すこれらのコンポーネントは、理由からスマートと呼ばれています。 彼らはライブラリと機能を呼び出す責任があります。
  • 状態の管理スマートコンポーネントは、状態を管理し、コンポーネントをいつ再レンダリングするかを知る責任があります。
  • スタイリングが含まれることはめったにありませんダムコンポーネントはスタイリングに重点を置いているため、スマートコンポーネントはスタイルを乱雑にすることなく機能に重点を置くことができます。

🦄ダムコンポーネントは、物事の外観に焦点を当てています。

ダムコンポーネントの一般的な特性：

  • UIに焦点を当てるほとんどすべての基本的なUIコンポーネントはダムコンポーネントと見なす必要があります。 例としては、ローダー、モーダル、ボタン、入力などがあります。
  • 小道具を受け入れるダムコンポーネントは小道具を受け入れて、動的で再利用できるようにします。 たとえば、親コンポーネントから小道具のボタンのタイトルを送信して、ボタンに一意の名前を付けることができます。
  • アプリの依存関係は必要ありませんReactstrap などのUIパッケージを除いて、ダムコンポーネントは依存関係を必要としません。
  • 状態を含めることはめったにありませんダムコンポーネントに状態がある唯一のインスタンスは、アプリケーションデータではなく、UI自体を操作するためのものです。 ダムコンポーネントに状態がある可能性のある例としては、ボタングループ、タブ、スイッチ、およびデータに影響を与えず、UIのみに影響を与えるその他のUI要素があります。

以前のサインインフォームの例を見てみましょう。 コンテナ、ヘッダー、入力、ボタンなど、ほとんどすべてのコンポーネントが再利用可能なダムコンポーネントになる可能性があります。

コンポーネントを分割する利点

✨再利用性✨

アプリのさまざまな場所で同様のコンポーネントを複数回書き出すことができますが、小道具を受け入れる再利用可能なコンポーネントを構築することで、時間を大幅に節約できます。

サインアップ、サインイン、パスワードを忘れた、アカウント設定、キックの場合はイベントサインアップフォームを含むアプリを考えてみてください。 それはたくさんの入力です！ 必要なインスタンスごとにこの入力を作成するのではなく、再利用可能なダムコンポーネントを作成して各画面にインポートし、親コンポーネントから小道具を送信して各入力を動的にすることができます。

✨簡単に変更できる柔軟性✨

スマートコンポーネントとダムコンポーネントを分離することで、面倒な作業を一切行わずに、アプリに小さな変更と大きな変更の両方を柔軟に加えることができます。

上記の例について少し考えてみましょう。 アプリ全体の入力の境界線の色を追加または変更したい場合はどうなりますか。 入力にダムコンポーネントを使用していなかった場合、入力が配置されたすべてのスポットでその境界線を変更する必要があるかもしれません。 入力用にダムコンポーネントを作成したので、アプリケーション全体で1か所の境界線を変更するだけで済みます。

✨コードの読みやすさ✨

簡単に言えば、コードが少なく、コードが整理されているほど、コードを理解するだけでなく、他の人が飛び込んで何が起こっているのかを理解しやすくなります。

✨一貫性を提供し、重複を防ぎます✨

アプリケーションを構築するとき、自分自身や他の人をプロジェクトに複製したり、まったく別の方法で不要なものを再構築したりするのは非常に簡単です。 スマートでダムなコンポーネントが何であるかをしっかりと把握することで、再利用可能なコンポーネントを探す場所を常に把握し、それらのコンポーネントの使用方法に関する基準を設定できるように組織を作成できます。

✨UIの決定を簡素化します✨

すべてのUIコンポーネントはダムコンポーネントに分割されているため、クライアント、Webデザイナー、またはグラフィックデザイナーがすべてを一度に表示できる1つの画面にすべてのUIコンポーネントを簡単にダンプできます。

✨テストしやすい✨

ダムコンポーネントは、小道具を取り込んでUIの一部を返すだけなので、テストが非常に簡単です。 これにより、ダムコンポーネントの非常に簡単な単体テストが可能になります。

いつ開始するか

新しいプロジェクトを開始したばかりでも、プロジェクトを開始してから数年経っても、このタイプのコンポーネント分離の実装を開始するのに遅すぎることはありません。

一般的に、プロジェクトを開始するとき、私は自分の中にフォルダを作成するのが好きです src 最初のコンポーネントの作成を開始する前に、コンポーネントを整理するためのフォルダー。 このプロセスでは、そのコンポーネントの機能と将来について考える必要があります。 他の人は、あまりにも多くの小道具を渡すポイントに到達するまで、ダムコンポーネントを排他的に構築し始めることを提案します。

もちろん、これがこの組織を実装したい古いプロジェクトである場合、優れたole’リファクタリングは医師が注文したものと同じかもしれません。 小さく始めて、繰り返されるUI機能をゆっくりと置き換え、全体的な概念を構築することをお勧めします。

🎉誰かがリファクタリングパーティーを言いましたか？！