著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React では、 state は、アプリケーション内でデータが時間の経過とともにどのように変化するかを追跡する構造を指します。 状態の管理は、インタラクティブなコンポーネントや動的なWebアプリケーションを作成できるため、Reactの重要なスキルです。 状態は、フォーム入力の追跡からAPIからの動的データのキャプチャまですべてに使用されます。 このチュートリアルでは、クラスベースのコンポーネント状態を管理する例を実行します。

このチュートリアルの執筆時点で、公式の Reactドキュメントは、開発者が React Hooks を採用して、新しいコードを作成するときに機能コンポーネントを使用するのではなく、状態を管理することを推奨しています。 クラスベースのコンポーネント。 React Hooksの使用はより現代的な方法と考えられていますが、クラスベースのコンポーネントの状態を管理する方法を理解することも重要です。 状態管理の背後にある概念を学ぶことは、既存のコードベースのクラスベースの状態管理をナビゲートしてトラブルシューティングするのに役立ち、クラスベースの状態管理がより適切であるかどうかを判断するのに役立ちます。 componentDidCatch と呼ばれるクラスベースのメソッドもありますが、これはフックでは使用できず、クラスメソッドを使用して状態を設定する必要があります。

このチュートリアルでは、最初に静的な値を使用して状態を設定する方法を示します。これは、古い値をオーバーライドするAPIからのデータの設定など、次の状態が最初の状態に依存しない場合に役立ちます。 次に、状態を現在の状態として設定する方法について説明します。これは、値の切り替えなど、次の状態が現在の状態に依存する場合に役立ちます。 状態を設定するこれらのさまざまな方法を調べるために、オプションのリストから購入を追加することによって更新する製品ページコンポーネントを作成します。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04