react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)

怎么理解“在react中，一切皆为组件 ” 句话

• react采用组件化的思想，最小的组件单位就是原生HTML元素，采用JSX语法组件声明调用
• react的虚拟dom，就是一个大的组件树，从父组件层到子组件，在react-router v4版开始，路由本身也是组件
• 各个库提供的hoc返回也是组件，如withRouter、connect
• react中的基础数据state props的传递也是以组件为基础

1. 什么是组件？

组件就是页面上的一部分，可以是一个按钮、一张图片，可以是任意一个html元素。

2. 有状态组件和无状态组件

1. 有状态组件

   这种组件有自己的state，可以控制内部状态的变化，也有props，一般用于处理业务型模块。

   //一个有状态的按钮
   class StatefulButton extends React.Component{
        
       state:{
        
           loading:false
       }
   	clickHandle=()=>{
        
           this.setState({
        loading:true})
           //...
       }
       render(){
        
           const {
        title} = this.props
           const {
        loading} = this.state
           if(loading){
        
               return (<span lassName="loading"></span>)
           }
           return (<button onClick={
        ()=>{
        this.clickHandle()}}>