什么是高阶组件？
高阶组件（HOC）也就是组件的组件（组件工厂），具体而言，高阶组件就是一个函数而已，这个函数接受一个组件，并且返回一个组件
再通俗易懂的讲，你有一个思域，送到改装店，然后再从改装店出来，又是一个不一样的思域；
用例：Redux中的connect 方法
为什么要用高阶组件？
高阶组件是对组件属性的扩展，提高代码的复用性；
高阶高阶组件的两种模式：属性代理 、反向继承;
属性代理：
A.js — 组件A
import React, { Component } from 'react'; import Hoc from '../HOC/Hoc' // 引入函数 class A extends Component { constructor(props) { super(props); this.state = { data:[] } } render() { return ( <div> <button onClick={this.props.click}>A组件的按钮</button> </div> ); } } export default Hoc(A); // 抛出组件的时候呢 执行该函数，传入原来的组件，获得到一个新的组件（这个组件就有了Hoc.js赋予给他的新的属性）在组件的props上
Hoc.js – 做属性代理的组件，其实本身就是一个函数而已
import React, { Component } from 'react'; function Hoc(WrapComponent) { return class extends Component{ constructor(props){ super(props) this.state={ } } clickEvent(){ alert('来自高阶组件的问候') } render(){ return( <WrapComponent name='hou'{...this.props} click={this.clickEvent.bind(this)} /> //返回时对原来的组件进行了一个扩展 ) } } } export default Hoc // look,just return a function
反向继承:
B.js – 受作用的组件
import React, { Component } from 'react'; import Hoc from '../HOC/Hoc' import goBackHoc from '../HOC/goBackHoc' class B extends Component { constructor(props) { super(props); this.state = { data:[], val:'B组件的按钮' } } render() { return ( <div> <button>萨达萨达</button> </div> ); } } export default goBackHoc(B);
- goBackHoc.js — 做反向继承的组件 ：拦截生命周期、state、渲染过程（还不是很清楚反向继承的作用在哪…）
function goBackHoc(WrapConponent){ return class extends WrapConponent{ //在这的时候不是去继承 React.Component 而是去继承传过来的组件 constructor(props){ super(props) // 超类继承 this.state= { val:'呵呵' } } render(){ return super.render() } componentDidMount() { } } } export default goBackHoc
