React.js : 状態構造の選択

私の記事が気に入ったら、コーヒーを買ってくるか、シェアしてください:)

---

この記事では、react.js プロジェクトで状態構造を選択する際の重要なポイントを検討します。

---

状態構造の選択

react コンポーネント を作成するときは、コンポーネント内に 状態 がいくつ必要か、またこれらの状態をどのように使用するかを決定する必要があります。 たとえば、コンポーネントを作成するときに 3 つの状態を使用し、コンポーネントは正しく動作しましたが、3 つの状態を使用して同じコンポーネントを作成できることに気付きました。したがって、状態構造を決定する必要があります。

---

国家構造を選択する際に、より良い決定を下すのに役立つ5つの原則についてお話します。

1. 関連する状態変数をグループ化する

コンピューター ゲームのキャラクターを考えてください。このキャラクターは x 座標と y 座標で移動できます。では、これらの x と y の値を状態として書き込みたい場合は、どうすればよいでしょうか?

• 悪いアプローチ :

• より良いアプローチ :

技術的には、これらのアプローチのいずれかを使用できます。ただし、**常に 2 つ以上の状態変数を同時に更新する場合は、それらを 1 つの状態変数にマージすることを検討してください**。

必要な状態の数がわからない場合は、オブジェクトまたは配列を使用して状態をグループ化できます。

---

2. 状態の矛盾を避ける。

メッセージング アプリを考えてみましょう。メッセージの送信を承認するには 2 つの異なる段階があることはご存知でしょう。 1 つ目は「メッセージを送信中」、2 つ目は「メッセージが送信されました」です。それでは、これらの2つの状態を2つの異なる状態、真と偽として宣言した場合、最初に何が思い浮かぶでしょうか?

• 不適切なアプローチ (紛争のリスク) :

isSending と isSent が同時に true になることは決してないので、これらを 3 つの有効な状態 (「typing」、「sending」、「sent」) のいずれかを取る 1 つのステータス状態変数に置き換えることをお勧めします

• より良いアプローチ :

---

3. 冗長状態を避ける

コンポーネントの状態構造を選択するときが必要です。コンポーネントのプロパティまたは既存の状態変数から何らかの情報を計算できる場合は、計算する必要はありません。この情報をコンポーネントの状態に保持します。

• 悪いアプローチ :

• より良いアプローチ :

** setFirstName または setLastName を呼び出すと、再レンダリングがトリガーされ、次のフルネームが新しいデータから計算されます。**

---

結論

状態を適切に構造化すると、コンポーネントの変更やデバッグが容易になります。この記事では状態構造を選択する際に考慮すべき3つの原則についてお話しました。これらの原則は他にもあるかもしれません。必要に応じて、コメントでこれらの原則について話すことができます。

以上がReact.js : 状態構造の選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。