【react】有状态和无状态组件详解

在 React 中，无状态组件（Stateless Component）和有状态组件（Stateful Component）是两种常见的组件类型，它们之间的主要区别在于是否具有内部状态（state）和是否能够访问 React 的生命周期方法。

1. 无状态组件（Stateless Component）:
   无状态组件是指那些不持有内部状态（state）的组件。它们通常由函数（函数式组件）来定义，接受一些 props 作为输入，然后返回一个用于渲染 UI 的 React 元素。由于无状态组件没有自己的状态，它们的渲染结果完全由输入的 props 决定，因此在相同的输入下始终会产生相同的输出。无状态组件没有访问 React 生命周期方法的能力。

   示例无状态组件：

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

2. 有状态组件（Stateful Component）:
   有状态组件是指那些持有内部状态（state）的组件。它们通常由类来定义，类中包含一个状态对象，可以在组件的整个生命周期内进行管理和更新。有状态组件可以访问 React 生命周期方法，因此它们适合处理具有动态数据和需要响应生命周期事件的情况。   

示例有状态组件：

   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>
       );
     }
   }

总结：
- 无状态组件更简单，适用于只需根据输入 props 渲染静态内容的情况。
- 有状态组件适用于需要管理内部状态和响应生命周期事件的情况，比如用户交互和动态数据展示。

需要注意的是，随着 React 的不断发展，React Hooks 的引入使得函数式组件也能够拥有状态和处理生命周期事件，从而模糊了无状态组件和有状态组件之间的界限。