React の usestate フックの紹介

React を使用している場合は、state と props の概念があることを知っている必要があります.クラス コンポーネントに状態を非常に簡単に追加できますが、機能コンポーネントに状態を追加するには、usestate フックを使用する必要があります.

フックとは？

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

これは、公式の反応ドキュメントからの引用です.

フックを使用すると、基本的に、クラスで使用できるメソッドを機能コンポーネントで使用できます.フックにはいくつかのルールもありますが、これについては後で説明します.
今のところ、フックは関数コンポーネントで使用するクラス コンポーネントで記述できるコードを記述できるユーティリティ関数であると考えてください.

useState フック

useState フックでは、関数をインポートして呼び出すだけです

import React, {useState} from 'react'
const App = () => {
 const initialCounter = 0
 const hookhere = useState(initialCounter)
 console.log(hookhere)
 return (<></>)
}

ご覧のとおり、useState フックは initalCounter をパラメーターとして受け取ります.
この関数の出力は、最初の項目が状態自体のリストになり、2 番目の項目が状態を変更する関数になります.したがって、 object destructuring を使用できます.
このような

const [counter, setCounter] = useState(initialCounter)

これで、プロジェクトでこのカウンターを使用できます.

状態の操作

現在、状態を操作するために使用できる setState 関数があります.パラメータとして別の関数を取り、その関数が状態を変更します.

この関数は prevstate をパラメーターとして受け取ることができますが、これはオプションです.

setCounter((prevstate)=> {return prevstate + 1})

上記のコードでわかるように、setCounter 関数は別の関数を受け取り、別の関数が新しい状態になる値を返します.

フックのルール

フックには、次のようないくつかのルールもあります.

条件付きでフックを呼び出すことはできません

フックは、レンダリングのたびに同じ順序で呼び出す必要があります.

これは、react フックを使用した基本的なカウンター アプリケーションのコードサンドボックスです.