有状态组件和无状态组件是 React 中两种不同的组件类型，它们在处理数据和实现逻辑的方式上有所不同。

1. 有状态组件（Stateful Components）：
   • 有状态组件是指具有内部状态（state）的组件，可以通过 state 来管理和更新组件的状态数据。
   • 有状态组件通过继承 React.Component 类或使用 class 语法来定义，具有自己的生命周期方法和状态管理能力。
   • 有状态组件适用于包含复杂逻辑、需要处理数据变化和状态更新的组件。

示例：

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0};}increment() {this.setState({ count: this.state.count + 1 });}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.increment()}>Increment</button></div>);}
}

2. 无状态组件（Stateless Components）：
   • 无状态组件是指不具有内部状态的组件，它仅依赖于外部传入的 props 来展示内容，没有自己的状态管理。
   • 无状态组件通常使用函数（Function）来定义，它没有生命周期方法，只接收输入数据并返回 UI 组件。
   • 无状态组件适用于纯展示性的组件，只负责接收数据并渲染 UI，不涉及复杂的逻辑和状态管理。

示例：

function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}

无状态组件的优点是简洁、易于测试和理解，由于没有内部状态，它们的渲染过程也更高效。在构建 React 应用时，可以根据组件的需求选择使用有状态组件或无状态组件，或者两者结合使用，以实现最佳的开发和性能效果。