如何使用useState React鉤子

看看我的React鉤子介紹首先，如果您是他們的新手。

我最常用的一個React鉤子是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計數器由Flavio Copes（@flaviocopes） 在密碼筆。