请阐述 React Hooks 的核心思想，并通过具体代码示例说明 useState 与 useEffect 的典型使用场景及各自作用。
考察说明
考查对 React Hooks 机制的理解，以及 useState 和 useEffect 的实际运用能力。
回答思路
- 【回答框架 1】React Hooks 是 React 16.8 引入的函数式组件状态与副作用解决方案，允许在函数组件中使用 state 和生命周期特性。核心思想是让逻辑复用更简洁，无需修改组件结构。
- 【回答框架 2】useState 返回一个状态值和更新函数。例如 const [count, setCount] = useState(0)，调用 setCount 会触发重新渲染。更新函数支持函数式更新，便于基于旧值计算新值。
- 【回答框架 3】useEffect 用于执行副作用，接收一个回调函数和依赖数组。依赖数组为空时表示仅挂载后执行；包含变量时，变量变化后执行；不传依赖数组则每次渲染后执行。需注意清理函数的使用，避免内存泄漏。
- 【回答框架 4】Hooks 必须顶层调用，不能在条件、循环或嵌套函数中使用，以保证状态顺序稳定。自定义 Hooks 可通过以 use 开头的函数封装共享逻辑，实现状态和副作用复用。
- 【关键点 1】useState 用于管理组件状态，useEffect 用于处理副作用。
- 【关键点 2】Hooks 只能作用于函数组件，且需顶层调用。
- 【关键点 3】useEffect 依赖数组控制执行频率，空数组表示仅执行一次。
- 【易错点 1】忘记设置依赖数组会导致每次渲染都执行 effect，可能引发性能问题。
- 【易错点 2】在循环或条件中使用 Hooks 会破坏状态顺序，引发不可预期错误。
- 【易错点 3】useEffect 中的异步操作需考虑竞态条件，合理使用清理函数。