React 组件有哪几种定义方式？函数组件和类组件有什么区别？

1. 函数组件（Function Component）

函数组件是最基础也是当前最推荐的组件定义方式，本质是一个接收 Props 并返回 JSX 的普通 JavaScript 函数。React 16.8 引入 Hooks 后，函数组件已能完全替代类组件的所有功能，包括状态管理和副作用处理。

2. 类组件（Class Component）

类组件通过 ES6 class 语法继承 React.Component 来定义，必须实现 render() 方法返回 JSX。类组件中通过 this.state 和 this.setState() 管理状态，通过生命周期方法（如 componentDidMount、componentDidUpdate）处理副作用。

3. 核心区别对比

• 语法结构：函数组件是普通函数，无 this 指向问题；类组件需要 constructor 绑定和 this 处理，容易出现绑定错误
• 状态管理：函数组件使用 useState、useReducer 等 Hooks；类组件使用 this.state 和 this.setState()
• 副作用处理：函数组件使用 useEffect 统一处理挂载、更新和卸载逻辑；类组件分散在 componentDidMount、componentDidUpdate、componentWillUnmount 等方法中
• 性能开销：函数组件无实例创建开销，打包体积更小，更容易被 Tree-shaking 优化

4. 当前推荐方案

React 官方和社区在2026 年的一致推荐是：所有新代码使用函数组件 + Hooks。类组件不会被移除，仍可用于维护旧项目，但新功能开发应优先采用函数组件方案。