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