在react组件中组合useState挂钩

在React中，useState 是一个内置的Hook，它允许你在函数组件中添加状态管理的能力。useState 接受一个初始状态作为参数，并返回一个包含两个元素的数组：当前状态和一个用于更新状态的函数。

基础概念

Hook：React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 及其他 React 特性。
useState：是 React Hooks 中的一个，用于在函数组件中添加状态。

类型

useState 可以用于管理任何类型的状态，包括但不限于：

基本数据类型（如字符串、数字、布尔值）
数组
对象
函数
自定义 Hook 返回的状态

应用场景

任何需要管理状态的场景都可以使用 useState，例如：

表单输入
切换开关
计数器
列表筛选

示例代码

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为 "count" 的 state 变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

遇到的问题及解决方法

问题：状态更新不是立即的

原因：React 可能会将多个 setState 调用合并成一次更新，以提高性能。

解决方法：如果你需要在状态更新后立即执行某些操作，可以使用 useEffect Hook。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在 count 更改时更新

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;