请解释 React Hooks 的核心概念，并举例说明 useState 和 useEffect 两个常用 Hook 的使用方式。

回答思路

1. 【回答框架 1】React Hooks 是 React 16.8 引入的一组函数，允许在函数组件中使用状态和其他 React 特性，无需编写 class。主要解决的问题包括：在组件之间复用状态逻辑、避免 class 的复杂性和 this 绑定问题，以及使组件更易于测试和维护。
2. 【回答框架 2】useState 是用于在函数组件中添加局部状态的 Hook。它接收一个初始值，返回一个状态变量和一个更新函数，例如 const [count, setCount] = useState(0)。更新函数触发重新渲染，并保证状态更新是异步批处理的。
3. 【回答框架 3】useEffect 用于执行副作用，如数据获取、订阅或手动修改 DOM。它接收一个回调函数和依赖数组，默认在每次渲染后执行，通过依赖数组控制执行时机。清理函数可以在组件卸载或依赖变化前取消订阅、清理定时器。
4. 【回答框架 4】使用时注意：Hooks 只能在函数组件顶层调用，不能在条件语句或循环中调用；依赖数组必须列全所有外部依赖，否则可能产生闭包陷阱；useEffect 的清理函数必须返回一个函数或 undefined，避免内存泄漏。
5. 【关键点 1】Hooks 让函数组件拥有状态和生命周期能力，无需 class。
6. 【关键点 2】useState 返回 [value, setter]，setter 触发重新渲染。
7. 【关键点 3】useEffect 通过依赖数组控制副作用执行频率，清理函数用于资源释放。
8. 【关键点 4】Hooks 调用规则：顶层调用，不在条件或循环中，保证顺序稳定。
9. 【关键点 5】useEffect 依赖缺失可能导致状态更新不及时，需要列全依赖。
10. 【易错点 1】忽视依赖数组，导致 effect 频繁执行或捕获旧值。
11. 【易错点 2】在条件语句中调用 Hook，破坏 Hook 顺序导致报错。
12. 【易错点 3】异步操作在组件卸载后继续执行，可能引发状态更新警告，需在清理函数中取消。