React 高阶组件（HOC）

2020-03-10 本文已影响0人鹤仔z

什么是高阶组件？

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

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

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

高阶组件的简单展示

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

高阶组件封装：

具体步骤如下：

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

import React,{ Component,Fragment } from 'react'

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

使用高阶组件

具体步骤：

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

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 访问被加工组件的数据。

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

在被加工组件 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);

在高阶组件中，直接通过 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渲染被继承组件

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

通过标签名直接渲染：

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

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

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

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

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

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);

在高阶组件中通过 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