setStateと反応して状態を管理する

アプリケーションの状態を追跡することは、シングルページアプリケーション（SAP）が変更を登録し、それらをユーザーにレンダリングする方法です。モデル、ビュー、コントローラー（MVC）フレームワークとは異なり、SAPはユーザーをリダイレクトしないため、クライアント側からの変更を管理する方法が必要です。 MVCフレームワークを確認するには、このガイドを参照してください。

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

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

React setStateとは何ですか？

React setStateメソッドは、コンポーネントの状態を安定して変更する方法です。 Reactで状態を変更する際の特定のガイドラインがいくつかあります。

1. setStateは、クラスコンポーネント内でのみ呼び出すことができます。クラスコンポーネントはconstructor()を呼び出します メソッドと初期状態を設定します。次に、setStateを呼び出すことにより、状態をさらに下に変更できます。
   
   Reactには2つの異なるタイプのコンポーネントがあります。機能コンポーネントとクラスコンポーネントがあります。ここでは、クラスコンポーネントのみを参照しています。詳細については、機能コンポーネントとクラスコンポーネントの違いに関するこの記事を確認してください。
   
2. クラスコンポーネントでsetStateを呼び出すだけで、 thisを使用してコンポーネント自体を直接参照できます。 キーワード。 this.setState()を呼び出す ベストプラクティスであり、コードが破損しないようにします。
   
3. 状態を直接変更しないでください。状態を直接変更しても、再レンダリングするためにReactに登録されません。状態を変更することの全体的なポイントは、変更をユーザーに反映するために、そのコンポーネントの再レンダリングを実行することです。

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

setStateReact構文

最初のガイドラインから始めて、クラスコンポーネント内でのみsetStateを使用できることがわかります。例として、ショッピングアプリがあり、ショッピングカートを実装するとします。 Cartというクラスコンポーネントを設定できます。このコンポーネントは、ユーザーがカートにアイテムを追加するときに、自身の状態を管理する役割を果たします。

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

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

このコンポーネントに状態を割り当てたいので、コンストラクターメソッドを呼び出す必要があります。次に、ベースコンストラクターが super（props）で呼び出されます。 。小道具で呼び出されていない基本コンストラクターを見ることができます。公式のReactドキュメントでは、基本コンストラクターメソッドは常に小道具を使用して呼び出す必要があると主張しています。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

状態を保持するクラスコンポーネントを構築するために必要なReact構文を完了したので、初期状態を割り当てる準備ができました。状態を直接参照できるのはこれだけです。 this.state = {shoppingCart: [] }を呼び出して状態を割り当てる ショッピングカートの初期状態を空の配列に設定できます。

ReactsetStateの例

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

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

ここでは、初期状態が設定されたCartクラスコンポーネントがあり、renderメソッドのreturnステートメントでカートをレンダリングしています。 setStateを使用してカートを更新する方法を見てみましょう。

以前に追加されたアイテムを保持しながら、shoppingCartに新しいアイテムを追加する関数を定義します。 JavaScriptのスプレッド演算子（…）を使用して初期状態のコピーを作成し、新しい状態で更新します。このように、ショッピングカートは追加されたすべてのアイテムを保持します。

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

addItem関数は、ボタンがクリックされたときにユーザーがそのアイテムを追加できるようにする場合に、ボタンのReactのonClick属性内で使用できます。私たちの目的では、関数のコンテキストでsetStateを使用する方法を確認するだけで十分です。

この記事は、setStateの使用方法を理解するための紹介を目的としたものであり、すべてを網羅しているわけではありません。

結論

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

公式のReactドキュメントには、より多くの練習の機会を提供するさらなる例があります。シングルページアプリケーションでは、コンポーネントの状態を追跡することは、ユーザーに変更をレンダリングするために不可欠であることを忘れないでください。