1.ローカルアプリケーション状態とグローバルアプリケーション状態の間でデータを合理的に分散します
Reactは、アプリケーションの現在の状態に基づいてユーザーインターフェイスを管理する役割を担うライブラリです。プログラマーの仕事は、状態を使って作業を合理的に整理することです。一部の開発者は、すべてのデータを自由にReduxリポジトリに保存することを好みます。これにより、すべてのアプリケーションデータの集中処理を整理できます。
ただし、アプリケーションの状態にどのデータを含める必要があるかを考えるときは、たとえば、単純なドロップダウンメニューを開くためだけに、状態管理システムにアクションを渡すかどうかを検討する価値があります。たとえば、ユーザーがフィードバックフォームに入力したデータについても同じことが言えます。アプリケーションのすべての部分は、そのようなフォームに何が入力されているかを知る必要がありますか？フォームに入力する内容に関しては、通常、そのようなデータはかなり短い期間内にアプリケーションによって処理されます。また、フォームを画面に表示するコンポーネントによってのみ使用されます。
Reduxストアを使用してアプリケーションが処理しているすべてのものを保存するのではなく、一部のデータをコンポーネントのローカル状態で保存することをお勧めします。これにより、アプリケーションアーキテクチャが過度に複雑になるのを防ぐことができます。
データを正確にどこに保存する必要があるかを考えるときは、次の質問をする価値があります。
- アプリケーションのさまざまな部分でこのデータにアクセスする必要がありますか？
- このデータに基づいて何か新しいものを形成する能力が必要ですか？
- 異なるコンポーネントが同じデータを使用していますか？
- このデータを含むアプリケーションの状態を復元して、特定の時点の形式に戻すことができることは価値がありますか（つまり、コード実行パスに沿って反対方向に移動する機能を使用してデバッグすることに関心がありますか）。
- このデータをキャッシュする予定はありますか（つまり、アプリケーションに既にデータがある場合は、リロードするのではなく、既存の状態を使用します）？
- コンポーネントをホットリロードするときにこのデータを保持する必要がありますか（このプロセス中に、コンポーネントの内部状態が失われる可能性があります）？
上記の質問に対する肯定的な回答は、データがコンポーネントの外部で何らかの形で使用されていることを示しています。これは、それらをアプリケーションのグローバル状態で保存することが理にかなっていることを意味します。ただし、ローカル状態を使用するコンポーネントは、より独立していて予測可能であることに注意してください。
2.アプリケーションをテストし、プロジェクトに最初からテストを装備する方法を学びます
自動テストを作成することは非常に重要です。実際のところ、Reactプロジェクトの作業のある時点で、手動でテストするには多くの時間とリソースが必要になります。
プロジェクトの開始時に、コードベースがまだ比較的小さい場合、テストを作成する必要がないと判断するのは非常に簡単です。アプリケーションに5〜10個のコンポーネントがある場合、自動テストの作成はほとんど無意味なルーチンタスクのように見えます。ただし、プロジェクトが50を超えるコンポーネントに成長し、高次のコンポーネントが多数含まれている場合、手動テストには1日かかる場合があります。そして、このアプローチでも、誰も気付かないようなエラーが残っている可能性があります。
さらに、テストを作成すると、コードをモジュールに分割することで、コードの構造を改善できます。これにより、エラーをすばやく見つけて、プロジェクトを本番環境の障害から保護できます。自動テストのポイントは、手動テストでコードが正しく機能していることを確認できなくなった段階で、成長中のプロジェクトを開発するのに役立つことです。
確かに、テストを作成する習慣がない場合、かなり大きなプロジェクトを持っていると、すぐにテストを作成することはできません。そのため、最初からテストを書き始める必要があります。プロジェクトのテストをどこから始めればよいかわからない場合は、統合テストから始めてください。重要なのは、テストで最も重要なことは、コンポーネントが互いに正しく相互作用することを確認することです。
3.アプリケーションのスケーリングに役立つ追加のツールを適用します
通常、Reactプロジェクトの開発プロセスの開始時には、多くの補助ツールを使用する必要はありません。ただし、非常に大きくなる可能性のあるプロジェクトについて話しているので、専用のツールを使用すると、プロジェクトの作業が大幅に容易になることに注意してください。それらのいくつかの説明は次のとおりです。
- PrettierとESLintを使用すると、チームのプログラマーが一貫したコードを作成するのに役立ちます。これらのツールは、コード内の構文やその他のエラーを減らすのに役立ちます。プロジェクトは、React Router、date-fns、react-hook-formなどの補助ライブラリを使用することで恩恵を受けます。
- TypeScript Redux , , . , .
- - , React , .
- Bitを使用すると、アプリケーションの独立したビルディングブロックとして提示されるコンポーネントを使用して作業を整理できます。これは、コンポーネントを個別にテストおよびレンダリングできることを意味します。コンポーネントを操作するこのアプローチにより、コンポーネントの保守と再利用が容易になります。
- create-react-appの代わりに、対応するNext.jsツールを使用して新しいReactアプリケーションを作成できます。
これらのツールは、大規模なReactアプリケーションのコードベースを維持するのに役立ちます。ただし、ツールを選択するときは、それぞれがプロジェクトの複雑さのレベルを高めることに注意してください。プロジェクトに何かを含める前に、すべてをよく研究し、十分な情報に基づいて決定を下してください。
4.プロジェクトファイルの構造に注意してください
スケーラブルなReactアプリを開発するために私が遭遇した最高のヒントの1つは、プロジェクトファイルを整理し、それらに適切な名前を付けることで、処理を高速化できることです。一部の開発者は、ディレクトリ
componentsに保存されているフォルダのメインファイルとして使用されることがよくありますindex.js。
さまざまなコンポーネントのファイルには
同じ名前が付けられています。プロジェクトを編成するこのアプローチは、あるファイルにコンポーネントをインポートする場合、対応する命令が非常に単純であるため、非常に合理的であるように思われます。
import Button from '../components/Button';
しかし、そのようなコンポーネントのファイルをエディターで開くとどうなるでしょうか。
どこでも-index.jsのみ
それらをナビゲートするのは不便です。それぞれがどのコンポーネントに属して
index.jsいるかを判断するのは簡単ではありません。ただし、これらのファイルの名前をコンポーネント名と一致するように変更すると、インポート手順の魅力が低下します。
import Button from '../components/Button/Button';
この状況になるには？たとえば、私のチームは次の解決策にたどり着きました。コンポーネントフォルダに、名前がコンポーネント名に対応するコードのファイルがあり、その隣に
index.jsコンポーネントをエクスポートするファイルがあります。
コンポーネントをエクスポートするコンポーネントコードファイルとindex.js
また、CSSファイルとユニットテストファイルをコンポーネントディレクトリに配置します。このアプローチでは、各コンポーネントディレクトリには、対応するコンポーネントに関連するすべてのものが含まれます。
自己完結型コンポーネント
5.コンポーネントのライブラリを作成します
コンポーネントのライブラリが大きくなるのを待つのではなく、プロジェクトの早い段階で構築を開始することをお勧めします。コンポーネントは、それらの作業の過程で、繰り返し使用するのに適したスタンドアロンブロックとして設計できます。コンポーネントのライブラリは、bit.devリソースを使用するか、システムを自宅に展開することにより、Bitを使用して作成できます。
6.フックを使用して、コンポーネントのロジックをコンポーネントから分離します
プロジェクトが成長するにつれて、一部のコンポーネントのロジックがさまざまな場所で何度も使用されていることに気付くかもしれません。独自のフックを使用して、コンポーネントロジックの共有を整理できます。
たとえば、バスケットボールの試合でポイントを計算するためのアプリケーションがあります。
バスケットボールの試合での得点のためのアプリケーション
あなたはこのアプリケーションのコードを見れば、それはファイルのそれを思われる
HomeTeam.jsとAwayTeam.js計で仕事に同じロジックを使用します。このような状況で、同じコードを使用してインターフェースを管理すると、そのコードをコンポーネントから分離して、別のファイルに入れることができます。
ここでは、カウンターの状態を格納するためのコードと、カウンターを増やすためのロジックを別のファイルに分けました
util.js。このファイルはコンポーネントにインポートされます。
フックは、本質的に、何らかの値を返す通常の関数です。彼らの助けを借りて、さまざまなコンポーネントで再利用することを目的としたコードのスタイルを設定できます。
結果
大規模なReactアプリケーションの開発は、そのようなアプリケーションのユーザーと開発者の利益を考慮した決定を行う必要がある複雑なタスクであることを常に念頭に置いてください。特定の各プロジェクトに取り組むときに従うのが理にかなっている推奨事項の選択は、プロジェクトを使用する人とプロジェクトを開発している人にとって、これらの推奨事項がどれだけ優れているかによって異なります。
プロジェクト開発で使用するツールと手法を選択するときは、試してみる価値があります。これにより、Reactアプリケーションにメリットをもたらすものを正確に選択できます。本日お伝えしたヒントがお役に立てば幸いです。
適切に拡張する必要があるReactプロジェクトを構築するときに、どのような開発ツールと手法を使用しますか？
