有状态和无状态组件

有状态和无状态组件

组件是自我维持的、独立的微实体，其描述了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/