React躬行记（10）——高阶组件

　　高阶组件（High Order Component，简称HOC）不是一个真的组件，而是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件，在很多第三方库（例如Redux、Relay等）中都有高阶组件的身影。由于遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、包装和拓展，改变原组件的行为（图9形象的表达出了高阶组件的作用）。这样不仅增强了组件的复用性和灵活性，还保持了组件的易用性。灵活使用高阶组件，可大大提高代码质量。

图9  高阶组件的作用

　　高阶组件有两种常见的实现方式：代理和继承，下面会分别做讲解。

一、代理方式

　　高阶组件作为原组件的代理，不但会将其包裹住，还会给它添加新特性，并且提供了众多控制原组件的功能，例如操纵props、抽取state、访问实例和再包装等。

1）操纵props

　　在原组件（即被包裹组件）接收到props之前，高阶组件可以将其拦截，执行增删改操作，再将处理过的props传给原组件。下面是一个简单的示例，会在高阶组件中新增了一个name属性。

//原组件
class Btn extends React.Component {
  render() {
    return <button>{this.props.name}</button>;
  }
}
//高阶组件
function HOC(Wrapped) {
  class Enhanced extends React.Component {
    constructor(props) {
      super(props);
      this.state = { name: "strick" };
    }
    render() {
      return <Wrapped {...this.state} />;
    }
  }
  return Enhanced;
}
const EnhancedBtn = HOC(Btn);

　　HOC()函数就是高阶组件，在函数体中声明了用于修饰原组件Wrapped的新组件Enhanced，它的name状态作为props传给了Wrapped，并在render()方法中将Wrapped渲染出来。当执行HOC(Btn)后，就能得到增强了的EnhancedBtn组件。

2）抽取state

　　将原组件的state和与之相关的处理函数抽取到高阶组件中，从而使得原组件无状态，变成容易复用的展示型组件。以一个能维护自己状态的Input组件为例，如下所示。

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handle = this.handle.bind(this);
  }
  handle(e) {
    this.setState({ value: e.target.value });
  }
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handle} />
    );
  }
}

　　现在将Input组件处理value状态和onChange事件的代码提升到高阶组件中，如下代码所示，在render()方法中初始化了一个newProps对象，用于把处理好的value状态和事件处理程序handle()回传给Input组件。

function stateHOC(Wrapped) {
  class Enhanced extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: "" };
      this.handle = this.handle.bind(this);
    }
    handle(e) {
      this.setState({ value: e.target.value });
    }
    render() {
      let newProps = {
        value: this.state.value,
        onChange: this.handle
      };
      return <Wrapped {...newProps} />;
    }
  }
  return Enhanced;
}

　　经过高阶组件的抽象后，Input组件就变得很简单，如下代码所示，没有额外的逻辑操作，只要接收传过来的props即可。

class Input extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <input type="text" {...this.props} />;
  }
}

3）Refs

　　通过第5篇提到的Refs访问方式，可以得到被包裹组件的实例，从而就能操纵组件中的DOM元素。以下面的Btn组件为例，在高阶组件中给它定义ref属性，这样就能在新组件的componentDidMount()方法中访问到Btn组件的实例。

class Btn extends React.Component {
  render() {
    return <button>提交</button>;
  }
}
function refHOC(Wrapped) {
  class Enhanced extends React.Component {
    render() {
      return <Wrapped ref={btn => { this.myBtn = btn }} />;
    }
    componentDidMount() {
      console.log(this.myBtn);        //Btn组件的实例
    }
  }
  return Enhanced;
}

　　注意，ref属性不会传递给原组件，如果在上面的Btn组件中读取this.props.ref，那么得到的值将是undefined，如下所示。

class Btn extends React.Component {
  render() {
    console.log(this.props.ref);      //undefined
  }
}

4）包装

　　在高阶组件中，还能通过引入其它React元素包装原组件，既能改变布局，也能增加样式。例如用一个包含内边距的<div>元素包裹原组件，并在其邻近的位置新增一个文本框，如下所示。

function wrappedHOC(Wrapped) {
  class Enhanced extends React.Component {
    render() {
      return (
        <div style={{ padding: 10 }}>
          <input type="text" />
          <Wrapped />
        </div>
      );
    }
  }
  return Enhanced;
}

二、继承方式

　　继承是另一种构建高阶组件的方式，即新组件直接继承原组件（如下代码所示），从而实现通用逻辑的复用，并且还能使用原组件的state和props，以及生命周期等方法。

function inheritHOC(Wrapped) {
  class Enhanced extends Wrapped { }
  return Enhanced;
}

　　在代理方式下的新组件和原组件会各自经历一次完整的生命周期，而在继承方式下，两者会共用一次生命周期。

1）渲染劫持

　　在高阶组件中，可以通过super.render()渲染原组件，从而就能控制高阶组件的渲染结果，即渲染劫持。例如在新组件的render()方法中克隆原组件并为其传递新的props，如下所示。

function inheritHOC(Wrapped) {
  class Enhanced extends Wrapped {
    render() {
      //获取原组件
      const origin = super.render();
      //合并原组件的属性，并新增value属性的值
      const props = Object.assign({}, origin.props, {value: "strick"});
      return React.cloneElement(origin, props, origin.props.children);
    }
  }
  return Enhanced;
}

　　代码中的React.cloneElement()方法能接收3个参数，第一个是要克隆的React元素，后两个是要传递的新props和原来的children属性。

　　除了render()方法，其余诸如componentWillMount()、componentWillUpdate()等生命周期中的方法也是能劫持的。

2）使用state

　　在高阶组件中，不仅可以读取原组件的state，还能对其进行修改或增加，甚至是删除。不过，这三类带有侵略性的操作，会让原组件内部变得混乱不堪，因此要慎用。在下面的示例中，Input组件包含一个value状态，高阶组件内的新组件Enhanced会在其构造函数中增加一个name状态，并修改value状态的值。

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }
  render() {
    return <input type="text" value={this.state.value} />;
  }
}
function stateHOC(Wrapped) {
  class Enhanced extends Wrapped {
    constructor(props) {
      super(props);
      this.state.name = "strick";        //增加状态
      this.state.value = "init";         //修改状态
    }
    render() {
      return super.render();
    }
  }
  return Enhanced;
}
let EnhancedInput = stateHOC(Input);

三、参数传递

　　高阶组件除了一个组件参数之外，还能接收其它类型的参数，例如为高阶组件额外传递一个区分类别的type参数，如下所示。

HOC(Wrapped, type)

　　不过，在React中，函数式编程的参数传递更为常用，即使用柯里化的形式，如下代码所示，其中HOC(type)会返回一个高阶组件。

HOC(type)(Wrapped)

　　而在第三方库中，这种形式的高阶组件被大量应用，例如Redux中用于连接React组件与其Store的connect()函数，它是一个能返回高阶组件的高阶函数，其参数可以是两个函数，如下所示。

const Enhanced = connect(mapStateToProps, mapDispatchToProps)(Wrapped);

　　将上面这条语句拆分成两条目的更为清晰的语句，就能让人更容易理解代码的意图，如下所示。

const enhance = connect(mapStateToProps, mapDispatchToProps);
const Enhanced = enhance(Wrapped);

　　虽然这种形式的高阶组件会让人困惑，但是更易于组合。因为它会把参数序列处理到只剩一个组件参数，而高阶组件的返回值也是一个组件，也就是说，前一个高阶组件的返回值可以作为后一个高阶组件的参数，从而使得这些高阶组件可以组合在一起。例如有三个高阶组件f、g和h，它们可以像下面这样组合在一起。

f(g(h(Wrapped)))

　　如果要嵌套的高阶组件很多，那么这种写法将变得异常丑陋且难以阅读。这个时候，就可以引入compose()函数，它能将函数串联起来，即用平铺的写法实现函数的组合，如下代码所示，省略了compose()函数的具体实现。

compose(f, g, h)

　　compose()函数的执行方向是自右向左，并且还有一个限制，那就是第一个高阶组件（即h）可以接收多个参数，但之后的就只能接收一个参数。

四、命名

　　在高阶组件中创建的新组件，不会再沿用原组件的名称。为了便于在React Developer Tools中调试，需要为新组件设置一个显示名称，例如新组件的名称是“Enhanced”，原组件的名称是“Input”，那么就以“Enhanced(Input)”为显示名称。

　　为了完成这个功能，高阶组件可以修改成下面这样。注意，在定义displayName属性时，用到了ES6新增的模板字面量。

function HOC(Wrapped) {
  class Enhanced extends React.Component { }
  Enhanced.displayName = `Enhanced(${getDisplayName(Wrapped)})`;
  return Enhanced;
}

　　getDisplayName()函数用于获取组件的名称（如下代码所示），如果组件的displayName属性不存在，那么就改用name属性，即类或函数的名称。

function getDisplayName(Wrapped) {
  return Wrapped.displayName || Wrapped.name || "Component";
}

五、注意事项

（1）不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件，而根据React的diff算法可知，原组件（即前一次所创建的组件）会先被卸载掉，然后重新挂载新组件。这么做不仅性能低下，而且原组件的状态和其所有子组件都将丢失。

（2）高阶组件创建的新组件不会包含原组件的静态方法，如果需要，那么就得手动复制。