Stateとは

Reactにおけるstate(状態)は、コンポーネント内部で管理されるデータのことを指します。

stateは、コンポーネントの見た目や動作を変更するために使用されます。

 

Stateの初期化

コンポーネントでstateを使用するには、まず初期値を設定する必要があります。

クラスコンポーネントでは、コンストラクタ内でthis.stateを使ってstateを初期化します。

関数コンポーネントでは、useStateフックを使用して初期値を設定します。

Stateの初期化

Stateの初期化

Stateの使用

stateは、コンポーネント内の任意の場所で使用できます。

例えば、イベントハンドラ内でstateの値を変更したり、表示に使用したりすることができます。

Stateの使用

Stateの使用

Stateの更新

stateはイミュータブル(変更不可)であるため、直接変更することはできません。

代わりに、setStateメソッド(クラスコンポーネント)または状態更新関数(関数コンポーネント)を使用してstateを更新します。

これにより、Reactが状態の変更を検知し、再レンダリングをトリガーします。

Stateの更新

Stateの更新

Stateの制限

stateはコンポーネント内でローカルに管理されます。

そのため、他のコンポーネントからアクセスするためには、propsを介して渡す必要があります。

また、stateは非同期に更新される場合があるため、複数のstateの更新を行う際には注意が必要です。