useStateReactフックの使用方法

useState Reactフックが何に役立つのか、そしてそれをどのように扱うのかを調べてください!

私をチェックしてください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

Tech Wiki Online!