高阶组件

高阶组件不是 React 的组成部分，而是一种基于 React 特性形成的设计模式，是一种复用组件逻辑的技巧。所谓高阶组件，就是以组件为参数，返回一个新组件的函数。高阶组件在 React 的第三方库中十分常见，在实际应用中经常使用高阶组件来解决横切关注点的问题。

在中大型应用中，通常会出现多个组件共用一种显示及处理风格，但行为不同的一系列组件。对于这种组件，就可以利用高阶组件对其进行抽象。高阶组件通过定义一个通用的组件，并根据需要注入不同的数据和功能来建立新的组件，所以常用的格式如同下例所示。

function Post(props) {
  // 通用组件定义
}

function filteredPost(WrappedComponent, selectedData) {
  return (props) => {
    // 专用组件定义
    return <WrappedComponent data={selectedData} />;
  };
}

const CommentPost = filteredPost(Post, (Data) => data.getComments());

示例中的函数 filteredPost 通过返回一个匿名类建立了一个新的组件，这个组件将传入的组件进行了包装，并做了外围的数据处理。这就使得原始的通用组件只需要关心通用数据和行为即可，包装后的组件负责个性化后的数据和行为的提供，以此达到了组件复用的目的。

高阶组件不对原组件做任何修改，只是在外围进行包装或者多个组件的组合。对原始组件的干涉越少，代码的抽象级别就越高。