React 高阶组件注意事项

使用高阶组件应当注意的几点：

1、 高阶组件作为一个高复用性的函数。应该尽量做到在HOC函数中不修改原有组件。昨天说到，高阶组件接收一个组件作为参数，并且返回一个新的组件。HOC对传入组件不应该做改变。 高阶组件作为一种抽象方式，不应该关心其内部的代码逻辑。我们应该使用组件的组合来达到我们的目的。

2、 Conversion: HOC函数可以通过组件的特性来传参。但是不应该大幅修改Conversion。这一段我没太看懂， 贴一段官方的例子：

render() {

  // Filter out extra props that are specific to this HOC and shouldn't be

  // passed through

  const { extraProp, ...passThroughProps } = this.props;

  // Inject props into the wrapped component. These are usually state values or

  // instance methods.

  const injectedProp = someStateOrInstanceMethod;

  // Pass props to wrapped component

  return (

    <WrappedComponent

      injectedProp={injectedProp}

      {...passThroughProps}

    />

  );

}

3、 Conversion2。 最大化的组合。

这里要纠正一下昨天的错误，HOC函数接收不限个数的参数，一般情况下接收的第一个参数作为被包含组件，第二个参数作为数据来源。 有时候HOC仅接收一个参数，就是被包含的组件。

4、 Conversion3 高阶函数的代码结构建议是在定义HOC函数时，接收的参数名称应该就是组件的名称。 例如高阶组件名为 withSubscription, 被包装组件名为CommentList。显示名称应该是 withSubscription(CommentList), 方便调试。