Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

6章ステート管理

Reactのコンポーネントはデータがなければただの箱です。たとえば前章で実装したレシピのコンポーネントは、レシピデータがなければ無用の長物です。我々の作っているコンポーネントはそれ自体が価値のあるものではなく、ページの制作者がコンテンツを作るために使用する、ただのツールでしかありません。そして我々の使命は、制作者に最高のツールを提供することなのです。そのために我々は、データを効率よく扱い、加工する術を知っていなくてはなりません。

前章では、複数のコンポーネントを組み合わせてコンポーネントのツリーを形成する方法を学びました。データは各コンポーネントのプロパティ値として供給され、ツリーの階層構造を上から下に流れるように伝播します。ただ、Reactのコンポーネントが持つデータはプロパティだけではありません。プロパティはいわばRead-Onlyのデータで、ひとたびコンポーネントが描画されると変更されません。一方、コンポーネントの描画後に変更されるデータをステートと呼びます。たとえばレシピのコンポーネントはデータを表示するだけですが、ステートを導入することで、既存のレシピを変更／削除したり、新しいレシピを追加するUIを提供できます。

ステートとプロパティは相互に関連しています。Reactのアプリケーションでは、複数のコンポーネントを合成する際に、このステートとプロパティの相互作用をいかに巧妙にデザインするかが鍵となります。あるコンポーネントのステートの変更が、他のコンポーネントのプロパティに伝播し、それがツリー全体に波及し、最終的に必要な部分に変更が反映される、といった具合です。

この章ではステートの使い方を学ぶことで、よりインタラクティブなアプリケーションの実装を目指します。ステートを持つことで、コンポーネントはユーザーの操作をツリーに反映させることができます。また、この章ではフォームのデータを入力するためのコンポーネントをステートを使って実装します。 ...