如何使用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!