在 React 中，state 和 setState 分别扮演什么角色？它们之间有什么关系和区别？

回答思路

1. 【回答框架 1】state 是 React 组件内部用于存储和反映组件自身状态的对象。它通过 useState 或 this.state 定义，是驱动组件渲染的数据源。state 的值在组件生命周期内可以变化，但 React 要求以不可变的方式更新，直接修改 state 不会触发重新渲染。
2. 【回答框架 2】setState 是 React 提供的用于更新 state 的方法或函数。在函数组件中，setState 由 useState 返回，而在类组件中则是 this.setState。setState 接收新的状态值或更新函数，并通过调度机制触发组件的重新渲染。
3. 【回答框架 3】setState 的更新具有异步性和批处理特性。在 React 事件处理函数和生命周期方法中，多次调用 setState 会被合并为一次更新，避免不必要的渲染。在异步代码中，React 18 自动批处理，而 React 17 及之前可能不会批处理。
4. 【回答框架 4】setState 并非立即修改 state，而是将更新排入队列。因此，在调用 setState 后立即读取 state 可能得到旧值。如果需要基于当前状态计算新状态，应使用函数形式的 setState，以确保获取最新状态。
5. 【关键点 1】state 是组件状态数据，setState 是更新状态并触发渲染的方法。
6. 【关键点 2】直接修改 state 不会触发重新渲染，必须通过 setState 更新。
7. 【关键点 3】setState 是异步且批处理的，调用后不能立即读取新值。
8. 【关键点 4】更新函数形式能避免闭包陷阱，获取最新状态。
9. 【易错点 1】误以为 setState 是同步的，在调用后立即读取 state 导致拿到旧值。
10. 【易错点 2】直接修改 state 对象，导致组件不更新或产生不可预测的 bug。
11. 【易错点 3】在循环或多次调用中滥用 setState，触发额外渲染。