什么是高階組件（HOC）

• 高階組件是react中一種組件設(shè)計概念，普通組件將jsx轉(zhuǎn)換為視圖，高階組件裝飾組件生成新的組件。
• HOC目的是重用組件邏輯。
• HOC的具體實(shí)現(xiàn)為一個函數(shù)，傳入具體組件，對其進(jìn)行裝飾，返回新的組件。

實(shí)現(xiàn)方式

• 屬性代理

function proxyHoc(Comp){
   return class PH extends React.Component{
        render(){
          return <Comp/>
        }
   }
}

• 反向繼承

function  inheritHoc(Comp){
      return class  IH extends Comp{
          render(){
                return super.render()
          }
      }
}

用法

class Test extends React.Component{
        render(){      
              return(
                    <div>test</div>
              )
        }
}

export default proxyHoc(Test);    //導(dǎo)出最終得到的組件

功能

• 條件渲染、組合渲染
  • 屬性代理實(shí)現(xiàn)

    function proxyHoc(Comp){
       return class PH extends React.Component{
           render(){
               return (
                   <div>
                        <p>我</p>
                        <Comp {...this.props}/>        
                  </div>
               )
            }
       }
    }
    class Test extends React.Component{
        render(){
           return (
               <p>是最{this.props.isGreat === true ? "棒" : "弱"}的</p>
           )  
       }
    }
  

• 操作props
  • 屬性代理實(shí)現(xiàn)

  function proxyHoc(Comp){
      return class PH extends React.Component{
          render(){
              let newProps={...this.props,site:"全世界"}
                  return (
                      <div>
                          <p>我</p>
                          <Comp {...newProps}/>        
                      </div>
                  )
          }
      }
  }
  class Test extends React.Component{
      render(){
          return (
              <div>
                   <p>{this.props.site}</p>
                   <p>是最{this.props.isGreat === true ? "棒" : "弱"}的</p>
              </div>
          )
      }
  }
  

  • 反向繼承實(shí)現(xiàn)

  function inheritHoc(Comp){
      return class IH extends Comp{
          render(){
              let CompRenderTree = super.render();
              let otherProps = {site:"全世界"};
              let newProps = Object.assign({},CompRenderTree.props,otherProps);
              let NewComp=React.cloneElement(CompRenderTree,newProps);
  
              return(
                  NewComp
              )
         }
     }
  }
  

• 獲取ref（沒有搞懂）
  • 屬性代理實(shí)現(xiàn)

  function proxyHoc(Comp){
      return class PH extends React.Component{
  
          componentDidMount(){
              console.log(this.wrapperRef);
          }
          render(){
              return <Comp ref={ref=> {this.wrapperRef=ref}}/>
          }
      }
  }
  

  • 反向繼承實(shí)現(xiàn)

  function inheritHoc(Comp){
      return class IH extends Comp{
          componentDidMount(){
              console.log(this.wrapperRef);
          }
          render(){
              return (
                  super.render()
              ) 
          }
      }
  }
  
  
  class Test extends React.Component{
  
      wrapperRef=React.createRef("wrapperRef");
      render(){
          return (
              <div>
                   <p ref={this.wrapperRef}>Ref指向我</p>
              </div>
          ) 
      }
  }
  

• 提取state
  • 屬性代理實(shí)現(xiàn)簡單的雙向綁定

    function ppHOC(WrappedComponent) {
        return class PP extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    name: ''
                }  
  
                this.onNameChange = this.onNameChange.bind(this)
            }
            onNameChange(event) {
                this.setState({
                    name: event.target.value
                })
                console.log(this.state.name);
            }
            render() {
                const newProps = {
                    name: {
                        value: this.state.name,
                        onChange: this.onNameChange
                    }
                }
                return <WrappedComponent {...this.props} {...newProps}/>
            }
       }
    }
  
    class Input extends React.Component{
        render(){
            return <input name="name" {...this.props.name} />
        }
    }
  

• 操作state
  • 反向繼承可實(shí)現(xiàn)(僅該用于調(diào)試，避免弄亂內(nèi)部組件state)

   function proxyHoc(WrappedComponent){
       return class II extends WrappedComponent {
           render() {
               return (
                   <div>
                       <h2>HOC Debugger Component</h2>
                       <p>Props</p> <pre>{JSON.stringify(this.props, null, 2)}</pre>
                       <p>State</p><pre>{JSON.stringify(this.state, null, 2)}</pre>
                       {super.render()}
                  </div>
               )
           }
      }
   }
  

來源

code秘密花園
https://www.html.cn/archives/9462