如何使用useState React鉤子

找出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) 在密碼筆

Tech Wiki Online!