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

序章

React 開発では、アプリケーションデータが時間の経過とともにどのように変化するかを追跡することを、状態管理と呼びます。 アプリケーションの状態を管理することで、ユーザー入力に応答する動的なアプリを作成できるようになります。 クラスベースの状態管理Reduxなどのサードパーティライブラリなど、Reactで状態を管理する方法はたくさんあります。 このチュートリアルでは、公式のReactドキュメント:フックで推奨されている方法を使用して、機能コンポーネントの状態を管理します。

フックは、コンポーネントのpropsが変更されたときにカスタム関数を実行する幅広いツールセットです。 この状態管理の方法ではクラスを使用する必要がないため、開発者はフックを使用して、共有と保守が容易な、より短く、より読みやすいコードを記述できます。 フックとクラスベースの状態管理の主な違いの1つは、すべての状態を保持する単一のオブジェクトがないことです。 代わりに、状態を複数の部分に分割して、個別に更新することができます。

このチュートリアル全体を通して、useStateおよびuseReducerフックを使用して状態を設定する方法を学習します。 useStateフックは、現在の状態を参照せずに値を設定する場合に役立ちます。 useReducerフックは、前の値を参照する必要がある場合、または複雑なデータ操作を必要とするさまざまなアクションがある場合に役立ちます。 状態を設定するこれらのさまざまな方法を調べるために、オプションのリストから購入を追加することによって更新するショッピングカートを使用して製品ページコンポーネントを作成します。 このチュートリアルを終了すると、フックを使用して機能コンポーネントの状態を快適に管理できるようになり、 useEffect useMemo 、およびuseContext

前提条件

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