什么是高阶组件？
高阶组件(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，来控制是否显示 Headerimport 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 ，看看到底是什么：
这就不难理解了，高阶组件继承了 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
