useState 機能的状態管理

Reactにはコンポーネント定義の実装方法として、関数の実装による方法とクラスの実装による方法があります。一般的に、クラスで実装されたコンポーネントは、ライフサイクルや操作する状態を十分に見ることができますが、関数コンポーネントはライフサイクルや値の状態を持ちません。パフォーマンス面では、関数コンポーネントはコンポーネントを初期化する必要がありますが、関数コンポーネントはreturnで直接JSXを返すので、クラスコンポーネントよりも関数コンポーネントの方がパフォーマンスが良いです。パフォーマンス上の理由から、一般的には、コンポーネント定義を実装するためにファンクションコンポーネントを使用することをお勧めします。

• React関数内でのみ呼び出すことができます。つまり、一般的なjs useStateフックの実装ではなく、コンポーネント関数内で呼び出す必要があります。

• 関数のリターンセクションの先頭での呼び出しは、jsxコードセクションのフックを使用して実装することはできませんが、js変数の定義方法と同様に、useStateなどのフックを使用して実装する必要があります。

Class状態の管理

フックがない場合、状態管理は通常クラス・コンポーネント・アプローチで実装されます。

import React, { Component } from 'react';
export default class extends Component {
 constructor(props) {
 super(props);
 this.state = {date: new Date(),counter:0};
 }
 
 render() {
 return (
 <div>
 <h1>Hello, world!</h1>
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 <button onClick={() => this.state((state, props) => ({
 counter: state.counter + 1}))}>
 Click me
 </button>
 </div>
 );
 }
} 

useState

フックを使ってファンクションコンポーネントの状態管理を実装する場合、操作はよりシンプルになります。

import React, { useState } from 'react';
function Counter({initialCount}) {
 const [count, setCount] = useState(initialCount);
 return (
 <>
 Count: {count}
 <button onClick={() => setCount(initialCount)}>Reset</button>
 <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
 <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
 </>
 );
}

useStateの使い方

上記の例を通して、基本的にuseStateの使い方をまとめることができます。

• 状態の定義 状態オブジェクトは、Stateを使用して定義できます：

//useState 
const [state, setState] = useState(initialState);

useStateは、オブジェクトの初期値initialStateと、状態を更新するための更新関数setStateを渡して、状態の値（initialState）を返します。

• 更新関数の使用 ステータス値を更新するには、上記で返された更新関数を使用します。

setState(state+1);