ReactJS ベストプラクティス

この章では、アプリケーション開発の過程で一貫性を保つのに役立つReactのベストプラクティス、メソッド、技術を紹介します。

• 状態−この状態は可能な限り避けるべきです。状態を集中化し、それをコンポーネントツリーに支柱として渡すことは良い慣習です。同じデータが必要な複数のコンポーネントがある場合、それらを取り囲むカプセル化要素を設定して、状態を保存します。フロウパターンは、Reactアプリケーションの状態を処理する良い方法です。

• PropTypes−常にPropTypeを定義するべきです。これは、アプリケーション内のすべてのプロパティを追跡するのに役立ち、同じプロジェクトに参加している開発者にも有益です。

• レンダリング−アプリケーションの多くのロジックはrenderメソッド内に移動するべきです。コンポーネントのライフサイクルメソッド内のロジックを最小限に抑え、renderメソッドにロジックを移動することが望ましいです。使用する状態やプロパティが少ないほど、コードはきれいになります。状態をできるだけシンプルに保つことが重要です。状態やプロパティから何かを計算する必要がある場合は、renderメソッドで行います。

• 構成−Reactチームは、单一責任原則の使用を推奨しています。これは、あるコンポーネントが機能の1つしか責任を負わないことを意味します。もしコンポーネントが複数の機能を持っている場合、それらを再構成し、各機能ごとに新しいコンポーネントを作成すべきです。

• ハイオーダーコンポーネント (HOC)−以前のReactバージョンでは、再利用可能な機能を処理するためのミックスインが提供されていました。ミックスインの使用は推奨されていないため、その一つの解決策としてHOCを使用します。