请解释 React 中的 useState Hook 是什么，并阐述它在函数组件中存在的必要性。

回答思路

1. 【回答框架 1】useState 是 React 提供的一个 Hook，用于在函数组件中声明和更新状态。它接收初始状态作为参数，返回一个包含当前状态值和更新该状态函数的数组，例如 const [state, setState] = useState(initialState)。
2. 【回答框架 2】在函数组件出现之前，只有类组件能拥有内部状态，函数组件被称为无状态组件。useState 的出现使得函数组件也能拥有自己的状态，简化了组件逻辑，避免了类组件中 this 绑定和繁琐的生命周期方法。
3. 【回答框架 3】使用 useState 时，状态更新通常是异步的，React 会批量处理多个 setState 调用以优化性能。更新函数接收新值或一个基于前一个状态返回新值的函数，后者在处理连续更新时更安全。
4. 【回答框架 4】useState 的使用也需遵循 Hooks 规则，即只能在函数组件或自定义 Hook 顶层调用，不能在循环、条件或嵌套函数中调用，以保证 Hook 的顺序稳定。
5. 【关键点 1】useState 为函数组件提供了声明状态的能力，返回状态值和更新函数。
6. 【关键点 2】函数组件原本无状态，useState 弥补了这一不足，简化了组件复用和逻辑组织。
7. 【关键点 3】状态更新是异步的，React 会批量处理，使用函数式更新可避免闭包陷阱。
8. 【关键点 4】Hooks 规则要求顶层调用，不可在条件或循环中使用。
9. 【易错点 1】误以为 useState 状态更新是同步的，导致在设置后立即读取旧值。
10. 【易错点 2】在循环或条件语句中调用 Hook，违反了 Hook 规则，可能导致状态错乱。
11. 【易错点 3】直接将复杂对象整体复制修改，未利用函数式更新或使用不可变数据。