Reactの状態と小道具

PのROPS

プロパティとも呼ばれる小道具。小道具は、コンポーネント間およびコンポーネント間で値を渡すことを可能にするものです。小道具は親コンポーネントから受け継がれます。小道具をコンポーネントに渡すには、それを属性としてレンダリング関数に追加します。

もう1つの重要な注意点は、小道具の値が中括弧{}でJSXを介して渡されることです。小道具には、オブジェクト、配列、文​​字列、関数などの任意の値を指定できます。小道具の優れた点の1つは、reactコンポーネントを動的で再利用できることです。そうしないと、ハードコードされたデータで行き詰まり、reactのすべての利点が失われます。小道具の制限は、小道具を変更するには、親コンポーネントが新しい小道具を送信する必要があることです。

これは、小道具がどのように受け継がれるかの例です。

上記の例では、親コンポーネントはMainComponentであり、ListFormである子コンポーネントにデータを渡す必要があります。子コンポーネントには、トークンの小道具が割り当てられています。

Sテイト

まず、ほとんどの場合、状態はプレーンなJavaScriptオブジェクトです。状態は、変更されたコンポーネント内のデータです。コンポーネントの状態は、コンポーネントの寿命の間に変化する可能性があります。状態は、コンポーネント内で内部的に作成および管理されます。状態は、「いいね」ボタンのクリック、フォームへの情報の入力など、一部の値が変更されることが予想される場合に使用されます。状態は、最初に基本コンストラクターで設定されます。

これは、状態を設定する方法の例です。

ユーザーがブラウザで何らかのイベントをトリガーすると、状態が変化することを忘れないでください。状態を更新するために、setState（）が使用されます。状態は直接変更するのではなく、setState（）を使用して変更する必要があります。

以下の例を参照してください。

状態は初期データを保持します。状態を更新する必要がある場合、Reactはその変更に固有のDOMをすぐに再レンダリングします。setState（）メソッドは、DOMの再レンダリングをトリガーするものです。

以前は、状態はクラスコンポーネントでのみ使用可能であり、機能コンポーネントでは使用できませんでした。機能コンポーネントはステートレスコンポーネントとして知られていますが、Reactがフックを導入したため、状態を組み込むことができます。

要約すれば：

小道具はコンポーネントの外部にあり、親コンポーネントから受け継がれます。子コンポーネントは小道具を直接変更できません。

状態はコンポーネントの内部にあり、ユーザーがブラウザーでイベントをトリガーすることによって更新されます。状態は、setState（）と呼ばれるメソッドを介して更新されます。状態はコンポーネントの外部からアクセスできません。コンポーネント専用です。

小道具はデータを渡すために使用され、状態はデータを管理するために使用されます。

この記事が、Reactの状態と小道具の主な違いを明らかにするのに役立つことを願っています。

ハッピーコーディング…