javascriptのsetstate

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

アプリケーションのステータスの追跡は、シングルページアプリケーション(SAP)が変更をログに記録し、ユーザーに報告する方法です。テンプレートフレームワーク、ビュー、コントローラー(MVC)とは異なり、SAPはユーザーをリダイレクトしないため、クライアント側で今後の変更を管理する方法が必要です。 MVCフレームワークを確認するには、このガイドを参照してください。

Reactでは、コンポーネント自体が独自の状態を処理し、それに応じて再生成できます。これは、ここで詳細に説明されているライフサイクルメソッドを介して行われます。この記事では、setStateを使用して状態を変更する方法を見ていきます。

このガイドは、Reactの基本的な知識があることを前提としています。 Reactの基本を確認または学習するために、この記事では最高のReact学習リソースのいくつかをリストしています。

ReactsetStateとは何ですか?

React setStateメソッドは、コンポーネントの状態を安定して変更するようなものです。 Reactでステータスを変更するための特定のルールがいくつかあります。

  1. setStateをクラスコンポーネントで呼び出すことはできません。クラスのコンポーネントは、コンストラクター()メソッド を呼び出し、初期状態に設定します。次に、setStateを呼び出すことで、状態をさらに下に変更できます。
    Reactには、2つの異なるタイプのコンポーネントがあります。機能コンポーネントとクラスコンポーネントです。私たちの目的のために、私たちはクラスのコンポーネントと話しているだけです。機能コンポーネントとクラスコンポーネントの違いに関するこの記事の詳細については、
  2. でsetStateを呼び出すだけです。クラスコンポーネントの場合、 thisキーワードを使用してコンポーネント自体を直接参照できます。 this.setState() を呼び出すことがベストプラクティスであり、コードが破損しないようにします。
  3. ステータスを直接変更しないでください。直接の状態変化は、ReacttoSpawningには記録されません。状態変化の全体的なポイントは、ユーザーに加えられた変更を反映するために、そのコンポーネントの新しい解釈をトリガーすることです。

次に、これらのガイドラインのコンテキストで構文を見てみましょう。

setStateReact構文

最初のガイドラインから、クラスコンポーネント内でのみsetStateを使用できることがわかります。たとえば、ビジネスアプリがあり、ショッピングカートを実装したいとします。ショッピングカートと呼ばれるクラスコンポーネントを設定できます。このコンポーネントは、ユーザーがカートにアイテムを追加するときに、独自のステータスを管理する役割を果たします。

上記のコードを分解して、Cartクラスコンポーネントを宣言します。すべてのクラスコンポーネントと同様に、.Componentを拡張します。これは標準です。 React構文。

このペインに状態を付与したいので、コンストラクターメソッドを呼び出す必要があります。したがって、基本コンストラクターは super(props)で呼び出されます。小道具で呼び出されていないベースビルダーを見ることができます。公式のReactドキュメントでは、基本コンストラクターメソッドを常にpropsで呼び出す必要があることを要求しています

状態を維持するためのクラスコンポーネントを構築するために必要なReact構文を実行したので、初期状態に影響を与える準備ができました。これは、状態を直接参照できる唯一の時間です。 this.state =。{ShoppingCart:[]} を呼び出すと、カートの初期状態を空の配列に設定できます<

h2>Reactの例setState

前のセクションでは、初期状態の宣言に関連する構文を調べました。状態がコンストラクターメソッドで設定されると、通常どおりにレンダリングできます。

カート

); }} ReactDOM.render(、document.getElementById(`root`));

ここに、初期状態が設定されたバスケットを持つクラスコンポーネントがあり、renderメソッドのreturn宣言にバスケットが表示されます。 setStateを使用してカートを更新する方法を見てみましょう。

以前に追加したアイテムを保持したまま、カートに新しいアイテムを追加する関数を定義します。演算子 JavaScriptの拡散(。。。)を使用して、初期状態のコピーを作成し、新しい状態で日付を付けます。このようにして、バスケットには、追加されたすべての要素が含まれます。

ユーザーがこのアイテムを追加できるようにする場合は、ボタンのonClickReact属性でaddItem関数を使用できます。ボタンがクリックされます。私たちの目的については、関数の一部でsetStateを使用する方法を参照してください。 cient。

この記事は、setStateの使用方法を理解するための入門書として意図されており、決して網羅的なものではありません。

結論

この記事では、 setStateとは何か、その使用方法のガイドライン、構文、および簡単な例を学びました。これは、より深く掘り下げて、コンポーネントの状態を更新するための練習を促すための記事の基礎となるはずです。

公式のReactドキュメントには、より多くの練習の機会を提供する追加の例が含まれています。覚えておいてください。単一ページのアプリケーションでは、ユーザーに変更を加えるには、コンポーネントのステータスを追跡することが不可欠です。