如何使用 useState React hook

了解 useState React hook 的用途以及如何使用它！

如果您对 React hooks 还不熟悉，请先查看我的React hooks 介绍。

我常用的一个 React hook 是 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 example #1 counter ，由 Flavio Copes 创建。