有状态和无状态组件

组件是自我维持的、独立的微实体，其描述了UI的一部分，能够将应用程序的UI拆分为较小的组件，其中每一个组件都有本身的代码、结构和API，简单来讲组件容许你将UI拆分为独立可复用的代码片断，并对每一个片断进行独立构思。react

描述

React中的组件按状态主要分为无状态组件和有状态组件两类，一般来讲，使用class关键字建立的组件，有本身的私有数据this.state和生命周期函数就是有状态组件，使用function建立的组件，只有props没有本身的私有数据和生命周期函数就是无状态组件。git

无状态组件

无状态组件Stateless Component是最基础的组件形式，因为没有状态的影响因此就是纯静态展现的做用。通常来讲，各类UI库里也是最开始会开发的组件类别，例如按钮、标签、输入框等。其的基本组成结构就是属性props以及事件函数调用。因为不涉及到状态的更新，因此这种组件的复用性也最强，无状态组件因为没有本身的state和生命周期函数，因此运行效率高。github

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

简单来讲若是一个组件不须要管理state而只是纯粹的展现，那么就能够定义成无状态组件。less

function Hello(props) { 
    return (
        <div>Hello {props.name}</div>
    )
}

对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减小代码量，使用箭头函数可以使代码更加简洁。函数

const Todo = (props) => ( 
    <div onClick={props.onClick}>{props.text}</div> 
)

有状态组件

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

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/