ReactJS-ベストプラクティス

この章では、アプリ開発中に一貫性を保つのに役立つReactのベストプラクティス、方法、テクニックをリストします。

• State−状態は可能な限り回避する必要があります。状態を一元化し、小道具としてコンポーネントツリーに渡すことをお勧めします。同じデータを必要とするコンポーネントのグループがある場合は常に、状態を保持するコンテナ要素をコンポーネントの周囲に設定する必要があります。フラックスパターンは、Reactアプリで状態を処理するための優れた方法です。

• PropTypes−PropTypesは常に定義する必要があります。これは、アプリ内のすべての小道具を追跡するのに役立ち、同じプロジェクトで作業している開発者にも役立ちます。

• Render−アプリのロジックのほとんどは、renderメソッド内に移動する必要があります。コンポーネントライフサイクルメソッドのロジックを最小限に抑え、そのロジックをレンダリングメソッドに移動する必要があります。使用する状態と小道具が少ないほど、コードはクリーンになります。状態は常に可能な限り単純にする必要があります。状態または小道具から何かを計算する必要がある場合は、renderメソッド内で計算できます。

• Composition− Reactチームは、単一責任の原則を使用することを提案しています。つまり、1つのコンポーネントが1つの機能のみを担当する必要があります。一部のコンポーネントに複数の機能がある場合は、機能ごとにリファクタリングして新しいコンポーネントを作成する必要があります。

• Higher Order Components (HOC)−以前のReactバージョンは、再利用可能な機能を処理するためのミックスインを提供していました。ミックスインは現在非推奨であるため、解決策の1つはHOCを使用することです。