これは、All Good React 開発者が自分の状態を構築する方法です。

React コンポーネントの構造が不十分な状態は、エラー、バグ、困難なデバッグの温床となります。 ただし、適切に構造化された状態では、コンポーネントがよりクリーンで保守しやすく、デバッグが容易になります。効果的な状態管理のための重要な原則を見てみましょう。

データ構造化の基礎

React コンポーネントは多くの場合、状態に依存します。 状態変数の数とオブジェクト状態内のプロパティは開発者が選択します。 理想的ではない構造でもコンポーネントは機能する可能性がありますが、より良いものを目指して努力することはできます。 これらのガイドラインは、コンポーネントの状態構造について情報に基づいた決定を下すのに役立ちます。

1.相互接続された状態をマージ: 頻繁に更新される状態はグループ化する必要があります。状態を分離することは許容されますが、相互接続された状態をマージすると、同期エラーのリスクが大幅に軽減されます。 たとえば、アスペクト比を考慮してください:

<code class="language-javascript">// Less efficient:
const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);

// More efficient:
const [aspectRatio, setAspectRatio] = useState({ width: 500, height: 500 });</code>

オブジェクトにマージするときは、データの損失を避けるためにスプレッド演算子を使用してすべてのプロパティを更新することに注意してください。

<code class="language-javascript">setAspectRatio({ ...aspectRatio, width: 750 }); // Correct
// setAspectRatio({ width: 750 }); // Incorrect</code>

2.状態の競合を避ける: 送信ボタンを検討してください。 状態を使用して、読み込み、エラー、成功を示すことができます。 次の構造には問題があります:

<code class="language-javascript">// Problematic structure:
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [resolved, setResolved] = useState(true);</code>

この設定では、矛盾した状態 (読み込みと解決を同時に行うなど) が可能になります。 より良いアプローチは、定数を使用して状態を表します:

<code class="language-javascript">// Improved structure:
const STATE = {
  loading: 'loading',
  error: 'error',
  resolved: 'resolved',
};
const [requestState, setRequestState] = useState(STATE.resolved);</code>

これにより、状態の競合が防止され、エラー追跡が容易になります。

3.不要な状態を避ける: 状態を作成する前に、レンダリング中にプロパティ、既存の状態、または状態の組み合わせから値を導出できるかどうかを確認してください。 派生可能な場合は、コンポーネントの状態として追加することは避けてください。

<code class="language-javascript">// Inefficient:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [position, setPosition] = useState({ x: 0, y: 0 });</code>

ここで、position は冗長です。 position を削除するか、x と y を削除します。

4.状態の重複を排除する: 重複した状態は同期を保つのが困難です。同じデータを維持するために複数の状態を使用している場合は、状態を統合して、状態をより高いコンポーネント レベルに上げる可能性があります。

5.状態のネストを最小限に抑える: 深くネストされた状態は更新が困難です。 それを「平坦化」または「正規化」します。ネストされたオブジェクトの代わりに、ID の配列と、ID からデータへの個別のマッピングを使用することを検討してください。 ネストの深さはトレードオフですが、よりフラットな状態により更新が簡素化され、重複のリスクが軽減されます。 Immer のようなライブラリは、不変のネストされた状態の管理を支援します。

ご質問がございましたら、コメントを残してください。

以上がこれは、All Good React 開発者が自分の状態を構築する方法です。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。