Reactのデータを使用する：Properties＆State

Reactコンポーネントは、プロパティと状態の2種類のデータを使用します。プロパティは、コンポーネントをレンダリングし、状態を初期化するときに使用される入力値であり、コンポーネントがインスタンス化されると、不変と見なされる必要があります。一方、ステータスデータはコンポーネントによって変更され、通常はコンポーネントのイベントハンドラーに接続されます。

キーポイント

• Reactコンポーネントは、データを不変の特性と可変状態に分割し、各データの役割とコンポーネントとの関係をより明確に識別します。属性は、データフローを簡素化するため、より一般的です。ステータスは、ユーザーインタラクションやその他のUIイベントによって引き起こされるデータの更新をキャプチャするのに役立ちます。属性と状態の関係は、コンポーネント内のデータの流れを容易にします。
• 属性は、コンポーネントをレンダリングして状態を初期化するときに使用される入力値です。コンポーネントがインスタンス化されると、プロパティは不変と見なされる必要があります。コンポーネントのインスタンス化後、プロパティを変更しないでください。コンポーネント内の値の変更は状態と見なされ、Props属性の代わりにState属性を使用して追跡する必要があります。プロパティを変更しても、コンポーネントの更新がトリガーされないため、コンポーネントと属性が同期しなくなる可能性があります。
• ステータスは、通常、ユーザーとのやり取りを通じて、コンポーネントによって変更されたデータを示します。コンポーネントが状態を使用する前に、状態はgetInitialState関数を介して初期化する必要があります。状態を初期化した後、属性値と同様に、コンポーネントをレンダリングするときに状態値を使用できます。状態の変更を処理するには、setState関数を使用して、適切な状態プロパティに新しい値を設定します。

コンポーネントデータ型

Reactコンポーネントのデータは、プロパティまたは状態として保存されます。プロパティは、コンポーネントの入力値です。それらは、コンポーネントをレンダリングし、状態を初期化するときに使用されます（後で説明します）。コンポーネントをインスタンス化した後、プロパティは不変と見なす必要があります。プロパティ値は、コンポーネントがインスタンス化されたときにのみ設定でき、コンポーネントがDOMで再レンダリングされた場合にのみ、Reactは古いプロパティ値と新しいプロパティ値を比較して、どのDOM更新が必要かを決定します。

ステータスデータはコンポーネントによって変更され、通常はコンポーネントのイベントハンドラーに接続されます。通常、ステータスを更新すると、Reactコンポーネントが再レンダリングされます。コンポーネントが初期化される前に、その状態を初期化する必要があります。初期化値には、一定の値と属性値（上記のように）が含まれる場合があります。 Angular.jsなどのフレームワークと比較して、プロパティは一方向データと見なされ、状態は双方向のデータと見なすことができます。 Angular.jsは2つの異なる方法で1つのデータオブジェクトを使用し、Reactは2つのデータオブジェクトを使用し、それぞれが特定の目的を持つ2つのデータオブジェクトを使用するため、これは完全な類推ではありません。

プロパティ

以前のReactの記事では、プロパティを指定およびアクセスするための構文を導入しました。この記事では、さまざまなコードデモンストレーションでの静的および動的特性だけでなく、JavaScriptとJSXの使用についても調査します。以前の探索を拡大して、プロパティの使用に関する興味深い詳細を見てみましょう。

CSSクラス名をコンポーネントに追加する場合、classNameの代わりに属性名classを使用する必要があります。 ES2015は予約キーワードとしてclassを識別し、オブジェクトを定義するために使用されるため、Reactはこれを行う必要があります。このキーワードとの混乱を避けるために、属性名classNameが使用されます。 classという名前のプロパティを使用している場合、Reactは、プロパティ名をclassNameに変更する必要があることを開発者に伝える便利なコンソールメッセージを表示します。

classプロパティをclassNameに変更すると、警告メッセージは表示されません。

classNameなどの属性名に加えて、React属性には他にも興味深い側面があります。たとえば、コンポーネントプロパティの変更はアンチパターンです。コンポーネントをインスタンス化するときにプロパティを設定できますが、後で変更する必要はありません。これには、コンポーネントのインスタンス化後およびレンダリング後のプロパティの変更が含まれます。コンポーネント内の値の変更は、状態と見なされ、Props属性の代わりにState属性を使用して追跡されます。

コンポーネントをrederentedすることができます。この時点で、Reactは調整プロセスを実行して、新しいプロパティ値がDOMにどのように影響するかを判断します。その後、DOMは変更とともに更新されます。

status

ステータスは、通常、ユーザーとのやり取りを通じて、コンポーネントによって変更されたデータを示します。この変更を容易にするには、適切なDOM要素のイベントハンドラーを登録してください。イベントが発生すると、更新された値がDOMから取得され、コンポーネントに新しいステータスが通知されます。コンポーネントが状態を使用する前に、状態はgetInitialState関数を介して初期化する必要があります。通常、getInitialState関数は、静的値、渡された属性、または他のデータストアを使用して状態を初期化します。

状態が初期化されたら、属性値のようなコンポーネントをレンダリングするときに状態値を使用できます。更新された状態とのユーザーインタラクションをキャプチャするために、イベントハンドラーが登録されます。 Reactコンポーネントを自己完結型に保つために、イベントハンドラー関数オブジェクトを属性として渡すか、コンポーネントオブジェクト定義自体で直接定義することができます。

Reactの利点の1つは、標準のHTMLイベントの使用です。標準のHTMLイベントには、標準のHTMLイベントオブジェクトが含まれます。特別なイベントライブラリ、イベントハンドラー、またはカスタムイベントオブジェクトの学習は必要ありません。最新のブラウザは大部分が互換性があるため、jQueryなどの中間クロスブラウザーライブラリは必要ありません。状態の変更を処理するには、setState関数を使用して、適切な状態プロパティに新しい値を設定します。この関数を呼び出すと、コンポーネントはそれ自体を再レンダリングします。

結論

Reactコンポーネントは、データを処理するための2つの方法を提供します：プロパティと状態。データを不変の特性と可変状態に分割すると、各データの役割とコンポーネントとの関係をより明確に識別できます。一般に、データフローを簡素化するため、プロパティが推奨されます。ステータスは、ユーザーインタラクションやその他のUIイベントによって引き起こされるデータの更新をキャプチャするのに役立ちます。属性と状態の関係は、コンポーネント内のデータの流れを容易にします。属性を使用して状態を初期化することができ、状態値を使用してコンポーネントをインスタンス化およびレンダリングするときにプロパティを設定できます。状態を介したユーザーインタラクションから新しい値をキャプチャし、それらを使用してプロパティを更新します。アプリケーション内のより大きなデータフローは、Fluxと呼ばれるパターンを介して行われます。

（以下はFAQパートです。スペースの制限のため、重要な情報を簡単に要約して保持します。完全な回答については、元のテキストを参照してください）

faq

• 属性と状態の違い：プロパティは不変の入力値であり、状態はコンポーネント内の変動データです。
• 親コンポーネントは、データを子コンポーネントに渡します：Propsプロパティを介して。
• ステータスの更新：setStateメソッドを使用します。
• APIからデータを取得する：ライフサイクルメソッドcomponentDidMountまたは他のライブラリで通常使用されます。 fetch
• クラス属性：クラスに直接インスタンス属性を追加します。
• プロップを使用：関数コンポーネントの関数パラメーターとして。
• 関数コンポーネントで使用されたステータス：フックを使用します。 useState
• クラスコンポーネントと機能コンポーネントの違いは、ES6クラス、ステートフル、ライフサイクルメソッドです。
イベントの処理：
• キャメルケースを使用したイベントハンドラーは、通常、コンストラクターにバインドする必要があります。
ライフサイクル方法：
• 、、componentDidMount、componentDidUpdateなど。 componentWillUnmount

この出力は、元のテキストを擬似オリジナル化し、すべての画像と元の形式を保持していることに注意してください。 同義語の交換、文の構造調整、および段落の合併方法を使用し、記事に元の意味を変えることなく異なる式を提示するよう努めました。

以上がReactのデータを使用する：Properties＆Stateの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。