# 有状态和无状态组件
组件是自我维持的、独立的微实体，其描述了`UI`的一部分，可以将应用程序的`UI`拆分为较小的组件，其中每个组件都有自己的代码、结构和`API`，简单来说组件允许你将`UI`拆分为独立可复用的代码片段，并对每个片段进行独立构思。

## 概述
`React`中的组件按状态主要分为无状态组件和有状态组件两类，通常来说，使用`class`关键字创建的组件，有自己的私有数据`this.state`和生命周期函数就是有状态组件，使用`function`创建的组件，只有`props`没有自己的私有数据和生命周期函数就是无状态组件。

### 无状态组件
无状态组件`Stateless Component`是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种`UI`库里也是最开始会开发的组件类别，例如按钮、标签、输入框等。其的基本组成结构就是属性`props`以及事件函数调用。由于不涉及到状态的更新，所以这种组件的复用性也最强，无状态组件由于没有自己的`state`和生命周期函数，所以运行效率高。

* 只负责接收`props`渲染`DOM`，不维护自己的`state`。
* 不能访问生命周期方法。
* 不需要声明类，可以避免`extends`或`constructor`之类的代码，语法上更加简洁。
* 不会被实例化，因此不能直接传`ref`，可以使用`React.forwardRef`包装后再传`ref`。
* 不需要显示声明`this`关键字，在`ES6`的类声明中往往需要将函数的`this`关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定。
* 更好的性能表现，因为函数式组件中并不需要进行生命周期的管理与状态管理，因此`React`并不需要进行某些特定的检查或者内存分配，从而保证了更好地性能表现。

简单来说如果一个组件不需要管理`state`而只是纯粹的展示，那么就可以定义成无状态组件。
```
function Hello(props) { 
    return (
        <div>Hello {props.name}</div>
    )
} 
```

对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，使用箭头函数能够使代码更加简洁。
```
const Todo = (props) => ( 
    <div onClick={props.onClick}>{props.text}</div> 
)
```

### 有状态组件
有状态组件`Stateful Component`是在无状态组件的基础上，如果组件内部包含状态`state`且状态随着事件或者外部的消息而发生改变的时候，这就构成了有状态组件。有状态组件通常会带有生命周期`lifecycle`，用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的，根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。

```
class Hello extends React.Component{
  constructor(props){
    super(props);
    this.state = { 
      tips: "Hello World!"
    }
  }
  componentDidMount() {
    console.log("ComponentDidMount", this);
  }
  componentWillUnmount() {
    console.log("ComponentWillUnmount", this);
  }
  render() {
    return (
      <div>{this.state.tips}</div>
    );
  }
}

```


## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://www.jianshu.com/p/63569386befc
https://juejin.cn/post/6844903597147160584
https://juejin.cn/post/6844903493816303624
https://blog.csdn.net/cunjie3951/article/details/106919202
https://blog.csdn.net/weixin_30819085/article/details/99989723
https://setcina.github.io/2019/03/07/react%E6%9C%89%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E5%92%8C%E6%97%A0%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8C%BA%E5%88%AB/
```