在 React 中，构建组件主要有三种方式，随着 React 版本的演进，推荐的方式也在不断变化。以下是当前主流的组件构建方式及其区别：
1. 函数组件 (Function Components)
定义：使用 JavaScript 函数来定义组件。函数接收 props 作为参数，并返回要渲染的 React 元素（JSX）。
语法：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 或使用箭头函数
const Welcome = (props) => <h1>Hello, {props.name}</h1>;
特点：
- 简洁：语法简单，代码量少。
- 无状态（早期）：在 React 16.8 之前，函数组件只能接收
props，无法管理自己的状态或使用生命周期方法，因此被称为“无状态组件”或“纯组件”。 - 现代（使用 Hooks）：自 React 16.8 引入 Hooks 后，函数组件可以使用
useState,useEffect等 Hooks 来管理状态和副作用，功能上等同于类组件。 - 性能：通常比类组件更轻量，React 团队也更优化函数组件。
适用场景：现代 React 开发的首选方式，适用于绝大多数场景，特别是结合 Hooks 后。
2. 类组件 (Class Components)
定义：使用 ES6 的 class 语法，继承 React.Component 来定义组件。
语法：
class Welcome extends React.Component {
constructor(props) {
super(props);
// 初始化 state
this.state = { name: props.name };
}
// 生命周期方法
componentDidMount() {
console.log('Component mounted');
}
render() {
return <h1>Hello, {this.state.name}</h1>;
}
}
特点：
- 功能完整：可以管理
state，使用完整的生命周期方法（如componentDidMount,componentDidUpdate,componentWillUnmount）。 this上下文：需要处理this的绑定问题（如事件处理器）。- 代码量多：相比函数组件，需要更多的样板代码（boilerplate code）。
- 继承：基于类的继承机制。
适用场景：
- 旧项目或需要兼容旧代码。
- 某些非常复杂的场景（虽然 Hooks 已能覆盖绝大多数）。
- 注意：React 官方并未弃用类组件，但新项目强烈推荐使用函数组件 + Hooks。
3. React.createClass (已废弃)
定义：React 早期（v15.5 之前）提供的工厂函数方式来创建组件。
语法：
const Welcome = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return { name: 'Guest' };
},
getInitialState() {
return { count: 0 };
},
render() {
return <h1>Hello, {this.props.name}</h1>;
}
});
特点：
- 自动绑定
this：方法会自动绑定到组件实例，无需手动bind。 - Mixin 支持：支持
mixins实现代码复用（但已被证明是反模式）。 - 已废弃：从 React v15.5 开始被标记为废弃，建议迁移到 ES6 类。现在需要通过
create-react-class包来使用。
适用场景：不应在新项目中使用，仅用于维护旧代码。
主要区别对比
| 特性 | 函数组件 (现代) | 类组件 | React.createClass |
|---|---|---|---|
| 语法 | 函数 | ES6 class | 工厂函数 |
| 状态管理 | 通过 useState Hook | 通过 this.state 和 setState | 通过 getInitialState |
| 生命周期 | 通过 useEffect 等 Hook | 通过 componentDidMount 等方法 | 通过 componentDidMount 等方法 |
this 绑定 | 无 this 问题（箭头函数或 Hooks） | 需手动绑定事件处理器 | 自动绑定 |
| 代码简洁性 | ✅ 非常简洁 | ❌ 样板代码多 | ⚠️ 中等 |
| 逻辑复用 | Hooks (推荐) | 高阶组件 (HOC), Render Props | Mixins (反模式) |
| 当前推荐度 | ✅✅✅ 首选 | ⚠️ 可用，但非首选 | ❌ 已废弃 |
总结
React.createClass：已废弃，不应在新项目中使用。- 类组件：功能完整，但在新项目中不推荐作为首选，主要用于维护旧代码。
- 函数组件 + Hooks：现代 React 的标准和推荐方式。它结合了函数的简洁性和 Hooks 提供的强大状态与副作用管理能力，是当前和未来的主流。
最佳实践：在新项目中，始终优先使用函数组件和 Hooks 来构建你的 React 应用。
THE END
