如何在组件中使用 useState

在组件中使用 `useState` 需要先引入 React 库中的 `useState` 函数，然后在组件函数中使用它来定义状态变量和更新函数。

例如，以下是一个简单的计数器组件，它使用 `useState` 来定义状态变量 `count` 和更新函数 `setCount`，并在页面上展示当前计数器的值和两个按钮，一个用于增加计数器值，另一个用于减少计数器值：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

在上面的代码中，`useState(0)` 表示初始状态为 0，`[count, setCount]` 是一个数组解构，用于将 `useState` 返回的数组中的第一个值赋值给 `count` 变量，第二个值赋值给 `setCount` 变量。

当用户点击 "Increase" 按钮时，`setCount(count + 1)` 会更新 `count` 的值为当前值加 1，从而触发组件重新渲染并展示新的计数器值。类似地，当用户点击 "Decrease" 按钮时，`setCount(count - 1)` 会更新 `count` 的值为当前值减 1，从而触发组件重新渲染并展示新的计数器值。