在 React 中，类组件和函数式组件在设计理念、状态管理和生命周期处理上有哪些主要不同？请结合 Hooks 的出现谈谈这种差异。
考察说明
考查对 React 两种组件模型的本质区别以及 Hooks 引入对函数式组件能力提升的理解。
回答思路
- 【回答框架 1】类组件基于 ES6 class 定义，通过 constructor 中 this.state 初始化状态，使用 this.setState 更新，依靠 componentDidMount、componentDidUpdate、componentWillUnmount 等生命周期方法管理副作用。
- 【回答框架 2】函数式组件最初是无状态且没有生命周期，只接收 props 并返回 JSX；React 16.8 引入 Hooks 后，可通过 useState 管理状态，useEffect 模拟生命周期，useContext 消费上下文，使函数式组件具备了完善的逻辑复用能力且代码更简洁。
- 【回答框架 3】二者核心差异在于状态管理方式（state 对象与 this 绑定 vs useState 独立 state 变量）、生命周期处理（显式生命周期方法 vs useEffect 统一处理副作用）、逻辑复用（HOC/render props vs 自定义 Hooks）以及性能优化（shouldComponentUpdate vs React.memo）。
- 【回答框架 4】现代 React 官方推荐函数式组件，类组件仍被支持但新特性较少，使用类组件时需注意 this 绑定的问题。
- 【关键点 1】类组件使用 this.state 和 this.setState，函数式组件使用 useState 和 setState。
- 【关键点 2】类组件的生命周期通过方法显式调用，函数式组件使用 useEffect 模拟。
- 【关键点 3】函数式组件配合 Hooks 代码更简洁，逻辑复用通过自定义 Hooks 实现。
- 【关键点 4】类组件存在 this 绑定问题，函数式组件则不存在。
- 【关键点 5】性能优化上，类组件用 shouldComponentUpdate，函数式组件用 React.memo。
- 【易错点 1】不能简单说函数式组件功能更弱，引入 Hooks 后其能力已全面超越类组件。
- 【易错点 2】需区分 Hooks 与生命周期方法，useEffect 的依赖数组决定执行时机，不是严格对应 componentDidMount。
- 【易错点 3】函数式组件每次渲染都会重新执行，需注意避免不必要的计算。