React 高阶组件（HOC）

什么是高阶组件？

高阶组件(Higher-Order Components，简称HOC)：简而言之，高阶组件就是加工组件的函数

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。——引用自官网

高阶组件接收一个需要加工的组件，返回一个加工后的组件，从而实现抽出公共的逻辑部分来进行封装。

高阶组件的简单展示

现在我们创建了一个 layout.jsx 文件来编写一个简单的高阶组件，要求实现的功能为——给每个需要加工的组件加一个 Header 头部。

• 高阶组件封装：

  具体步骤如下：

  1. 导出一个函数，参数为需要加工的组件
  2. 返回一个匿名组件，继承于需要加工的组件
  3. 重写被继承组件

  import React,{ Component,Fragment } from 'react'
  
  // 1. 导出一个函数，参数为需要加工的组件
  export default (WrapperComponent)=>{
      // 2. 返回一个匿名组件
      return class extends Component{
          // 3. 重写被继承组件
          render(){
              return (
                <Fragment>
                    <div>Header</div>
                      <WrapperComponent />
                  </Fragment>
              )
          }
      }
  }
  

• 使用高阶组件

  具体步骤：

  1. 引入高阶组件
  2. 在导出正常组件的时候，用高阶组件进行加工

  import React,{Component} from 'react'
  // 引入高阶组件
  import layout from '../layout'
  
  class Home extends Component{
      render(){
          return (
            <div>我是组件</div>
          )
      }
  }
  
  // 在导出组件的时候，用高阶组件进行加工，则外部获取的组件便是加工后的有Header的组件
  export default layout(Home);
  
  

高阶组件的属性代理

在外部通过属性传值的方法给被高阶组件加工后的组件传值的时候，值会传给高阶组件，而不是被加工组件。

换句话说， this.props 只能在高阶组件内取到值。如果想在被加工组件内通过 this.props 取值，需要高阶组件往被加工组件身上传值。这就是属性代理。

通过属性代理的方式，可以使高阶组件使用起来更加自由，做更多的事情。

接着上述例子：

• 在App组件内调用Home组件渲染时，传递一个值：

  import React from 'react'
  import Home from './components/home'
  export default class App extends React.Component{
      render(){
          return (
              <div>
                  {/* 在此向Home组件传值 */}
                  <Home user="haha"/>
              </div>
          )
      }
  }
  

• 在Home组件通过 this.props 进行接收，结果为空对象，没有接收到值：

  // ... //    
  render(){
      console.log(this.props)  // 输出结果为：{}
      return (
          <div>我是组件</div>
      )
  }
  // ... //
  

• 在高阶组件内通过 this.props 进行接收，接收成功：

  //...        
  render(){
      console.log(this.props) // 输出结果为：{user:"haha"}
      return (
          <Fragment>
              {this.state.isHeader?<div>Header</div>:""}
              <WrapperComponent />
          </Fragment>
      )
  }
  // ... 
  

高阶组件的反向继承

在高阶组件中，因为返回的组件直接继承了被加工组件，所以可以直接通过 this.state 访问被加工组件的数据。

还是基于上述的简单例子：

1. 在被加工组件 Home 中，定义数据 isHeader ，来控制是否显示 Header

   import React,{Component} from 'react'
   import layout from '../layout'
   
   class Home extends Component{
       constructor(){
           super();
           // 在此处定义自己的数据
           this.state = {
               isHeader:true
           }
       }
       render(){
           return (
            <div>我是组件</div>
           )
       }
   }
   export default layout(Home);
   

2. 在高阶组件中，直接通过 this.state 获取 Home 组件中的 state 数据。

   import React,{ Fragment } from 'react'
   
   export default (WrapperComponent)=>{
       return class extends WrapperComponent{
           render(){
               return (
                <Fragment>
                       {/* 在此处访问被加工组件的数据，如果isHeader为true，则渲染Header */}
                    {this.state.isHeader?<div>Header</div>:""}
                       <WrapperComponent />
                   </Fragment>
               )
           }
       }
   }
   

这么一来，简单的取值逻辑就完成了，我们不妨在 高阶组件的 render 函数中输出一下 this ，看看到底是什么：

image.png

这就不难理解了，高阶组件继承了 Home 组件的所有东西，自然可以通过 this 来访问被加工的组件的属性了。

高阶组件的super

在高阶组件中，通过反向继承被加工的组件之后，可以对被继承组件做很多操作。例如通过 super 访问被继承组件中的方法。

super渲染被继承组件

在高阶组件中，渲染被继承组件有两种方法：

1. 通过标签名直接渲染：

   export default (WrapperComponent)=>{
       return class extends WrapperComponent{
           render(){
               return (
                <div>
                       <WrapperComponent />
                   </div>
               )
           }
       }
   }
   

2. 通过 super.render() 调用被继承组件的render函数进行渲染

   export default (WrapperComponent)=>{
       return class extends WrapperComponent{
           render(){
               return (
                <div>
                       {super.render()}
                   </div>
               )
           }
       }
   }
   

通过super调用被继承组件的方法

1. 被继承组件中定义方法和数据：

   import React, { Component } from 'react'
   import layout from '../layout'
   
   class Home extends Component {
       constructor() {
           super();
           this.state = {
               componentName: "Home组件"
           }
       }
       render() {
           return (
               <div>我是组件</div>
           )
       }
       handleClick() {
           alert(1);
       }
       componentDidMount() {
           console.log("componentDidMount")
       }
   }
   
   // 在导出组件的时候，用高阶组件进行加工，则外部获取的组件便是加工后的有Header的组件
   export default layout(Home);
   
   

2. 在高阶组件中通过 super 进行操作

   import React,{ Fragment } from 'react'
   
   export default (WrapperComponent)=>{
       return class extends WrapperComponent{
           render(){
               console.log(this.props,"layout")
               return (
                <div>
                       {super.render()}
                       {/* 操作被继承组件的方法，点击后成功alert(1) */}
                       <button onClick={super.handleClick.bind(this)}>点击</button>
                   </div>
               )
           }
           componentDidMount(){
               console.log("abc")       // 输出结果：abc
               {/* 操作被继承组件的生命周期 */}
               super.componentDidMount() // 输出结果：componentDidMount
           }
       }
   }
   

高阶组件的应用

• Provider/Consumer传值封装

  link

• 简易Loading实现

  link