react useState

useState 是 React 提供的一个 Hook，用于在函数式组件中添加状态管理。它使您可以在函数式组件中添加内部状态，而无需将组件转换为类组件。

useState 返回一个状态值和一个更新该状态值的函数。当状态值更新时，React 会重新渲染组件，以便显示更新后的状态。

以下是 useState 的基本用法示例

import React, { useState } from 'react';

function Counter() {
  // 定义一个名为 count 的状态变量，初始值为 0
  const [count, setCount] = useState(0);

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

在上面的示例中，useState(0) 声明了一个名为 count 的状态变量，初始值为 0。setCount 是一个用于更新 count 状态的函数。

每次点击按钮时，setCount 函数将 count 的值增加 1。由于 count 的值发生了变化，React 将重新渲染 Counter 组件，并显示更新后的 count 值。

useState 可以多次使用，以便在组件中定义多个状态变量。例如：

function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [isVisible, setIsVisible] = useState(true);
  // 其他状态变量...
}

useState 是 React 中最常用的 Hook 之一，它为函数式组件提供了管理内部状态的能力，使得函数式组件的功能和灵活性与类组件相似。