どうやって反応器を設計しますか?

3942 ワード
FE TIL React テキストリンク
REACTを学んで約2~3ヶ月になりますが、以前はCRA(create-act-app)で簡単にREACTプロジェクトを生成し、本や講義で実現していました.しかし、チームの発生と協力が進むにつれて、プロジェクトでどのようなモードを使用するか、フォルダ構造がどのように実現されるかを考え始めました.
一人で反応を学んだり、クローンアプリを作ったりするときは、簡単にCRAで作ることができ、全体の構造を確認しやすいのですが、実際の作業では、サイトの規模によっては、多くのコンポーネントが構成されている可能性があり、後でこれらのコンポーネントに投入して把握する必要があります.
最初の設計意図、計画、および指導が明確でない場合、反応コンポーネントは、今後の実際の操作過程において非常に膨大で複雑になる.また、アレンジを行わないと、後で繰り返し使用可能な部品があっても使用できない場合があります.
これらの問題を解決するためには、プロジェクトの実施前に設計を計画するために十分な考慮と基準があることが重要である.また、私の後継者が来ると、私の設計基準を十分に理解し、一緒に仕事をしている人が多いときに基準を共有するガイドがあるはずです.
したがって、反応素子とフォルダ構造にどのような内容があるかを知る必要があります.
はんのうそしアレイ
Presentation - Container ComponentPresentation-Container Componentパターンは過去によく取り上げられ運用されていたパターンである.Container Component処理データPresentation Component出力データの形式で、UIと論理を別々に管理するモード.これは、1つのコンポーネントにapi呼び出し、イベント関数、論理などのすべてのコンテンツが含まれている場合、各ファイルが非常に大きくなり、メンテナンスが困難になるためです.しかし、このモデルを初めて紹介したDan Abramovは、2019年を基準に今はこのモデルを使用しないことを言及した.Hook登場するので、離れずに同じことができる.
💡 Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. [Hooks](https://reactjs.org/docs/hooks-custom.html) let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.
Custom HooksCustom hooks上記Presentation-Container Componentモードではフックで論理を管理する.hooks管理ロジックを使用すると、UIとロジックを再利用できます.custom hooks論理とレンダリングが分離されているため、両者を接続することはユーザの責任である.構成部品を正しく実装するには、構成部品の動き方を深く理解する必要があります.
げんしせっけい

原子設計は,原子,分子,有機物,テンプレート,ページを用いて有効なインタフェースシステムを作成する.ウェブサイトの構成ブロックはHTML要素であり、これらの要素は原子と見なすことができる.原子結合合成分子のように,HTML要素が結合して複雑なページを形成する.
原子(Atoms)-ボタン、タイトル、テキスト入力フィールド(すべての構成部品のベースブロック、再分解できない必須要素)
分子(Momoleculates)-2つ以上の原子からなるUI要素の単純なグループであり、それらは1つのユニットで共に動作する.
有機物−界面の個別領域を形成する分子、原子または他の有機物からなるより複雑な成分.
テンプレート(Templates)-構成部品を配置し、設計構造を表示します.
ページ(Pages)-実際のコンテンツを配置するUI、テンプレートの具体的な例を表示します.
atomic構造はUI再利用性に優れている.しかし欠点は,設計システムの構築の初期費用が高く,論理と状態をページからpropsに下げる必要があることである.
リアクションフォルダ構造
リアクターには複数のフォルダ構造があります.
  • components=素子
  • pages=ページ番号
  • hooks=hooks達
  • style=style
  • assets=画像、アイコンなどの静的ファイル
  • utils=ユーティリティ
  • api=apiディレクトリ
  • types=type(ints+react)
  • store=グローバル状態
    • 一般的なフォルダは次のとおりです.フォルダ構造の例は、応答式ドキュメントで提案された2つの構造を含む.
    ファイルの機能またはルーティングに基づいて分類
    common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js
    css、js、およびテストファイルを機能またはルーティング分類のフォルダに配置する方法.
    ファイルタイプ別に分類
    api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
    これは似たようなファイル間をバンドルする方法です.
    また,フォルダ構造を決定する際に注意すべき点は,オーバーラップを避けることである.
    これらの異なる反応素子モードとフォルダ構造を研究したが,素子モードとフォルダ構造をどのように設計するか.
    反応器は多くの素子から構成されるため、設計された素子は反応器の設計項目において大きな比重を占めている.
  • 拡張性・再利用可能なコードを記述する必要がある.依存性が強く、ターゲットがないコードは、コンポーネントの特徴を無視した場合に、再利用性と汎用性が欠けている場合に記述されると言える.
  • コードを分離し、単一の責任を持つ構成部品を生成しなければならない.再利用性と汎用性を持つためには、1つの役割のみを果たすことをお勧めします.(ex.単一責任原則)純関数の特性のように,同じpropsを受け取った場合,同じJSXを返すことができる必要がある.
  • 制御を外部に委任することを考慮すべき制御を外部に委任すると、コードの理解が難しくなり、可読性が低下する可能性があります.
    • 各コンポーネント・モードとフォルダ構造のメリットとデメリットを考慮して、プロジェクトに適切なモードと構造を計画することが重要です.
    redis clusterクラスタ構築
    Spring redis実装