[JavaScript知识库]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()}}>{title}</button>)
       }
   }
   

   2. 无状态组件

      组件所有状态都通过props来控制，只提供元素、结构，常用于公用的模块

      class StatelessButton extends React.Componet{
          render(){
              const {loading,title,clickHandle} = this.props
              if(loading){
                  return (<span className="loading"></span>)
              }
              return (<button onClick={()=>{clickHandle()}}>{title}</button>)
          }
      }
      

   3. 组件的封装、继承

   1. 组件的封装

   ? 独立一个组件，单独处理它的元素、结构、逻辑，通过create各种props去完善组件内部的状态变化，以达到通用的效果。

   ? 比如：创建一个输入框组件，有默认的状态，支持自定义输入框的外部样式、placeholder等

   class Input extends React.Component{
       static defaultProps = {
           placeholder:'请输入内容',
           type:'text',
           //...
           
       }
   	changeHandle=()=>{
           //...
       }
       render(){
           return (<input onChange={(e)=>{this.changeHandle(e)}} {...this.props}></input>)
       }
   }
   

   当遇到其他场景，比如需要输入框前面添加修饰内容时，可以调整，

   class Input extends React.Component{
   	changeHandle=()=>{
           //...
       }
       render(){
           const {sideNode} = this.props
           if(sideNode){
               return (<span><input onChange={(e)=>{this.changeHandle(e)}} {...this.props}></input></span>)
           }
           return (<input onChange={(e)=>{this.changeHandle(e)}} {...this.props}></input>)
       }
   }
   

   2. 组件的继承

   创建一个类，该类时另一个类的子类，子类继承了父类所拥有的状态和函数

   // 父类组件
   class ProvideBox extends React.Component {
     state = {
       color: 'red'
     }
   
     clickHandle = () => {
       this.setState({color: 'blue'})
     }
   }
   
   // 子类 页面组件
   class Box extends ProvideBox {
     render() {
         //直接就能使用父类的状态state、方法clickHandle
       return (
         <button onClick={this.clickHandle}>
           <span style={{color: this.state.color}}></span>
         </button>
       )
     }
   }
   

2. 4.高阶组件的使用

   高阶组件HOC:Highter-Order Components 本质就是一个函数，能够接收一个组件并返回一个组件

   //定义一个高阶组件
   // 使用箭头函数不加大括号的话，默认return
   const ProvideBox=(Component)=>class extends React.Component{
       render(){
           return (
           	<div>
               	<header>头部</header>
               	<Component {...props}></Component>
               	<footer>底部</footer>
               </div>
           )
       }
   }
   

   使用：

   class Box extends React.Component{
       render(){
           return (<div>内容</div>)
       }
   }
   export default Provide(Box)