useStateReactフックの使用方法

私をチェックしてくださいReactフックの紹介まず、あなたが彼らに不慣れであるならば。

私が最もよく使用するReactフックの1つはuseState。

import React, { useState } from 'react'

を使用してuseState()API、新しい状態変数を作成し、それを変更する方法があります。useState()状態項目の初期値を受け入れ、状態変数を含む配列と、状態を変更するために呼び出す関数を返します。配列を返すので、使用します配列の破壊次のように、個々のアイテムにアクセスするには：const [count, setCount] = useState(0)

これが実際的な例です：

import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘app’))

いくつでも追加できますuseState()必要な数の状態変数を作成するために、必要な呼び出しを行います。コンポーネントのトップレベルで呼び出すようにしてください（ifまたは他のブロック内）。

Codepenの例：

ペンを見るReact Hooksの例＃1カウンターフラビオ・コープス（@flaviocopes） オンCodePen。