高阶组件

具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

高阶组件就是一个函数，里面封装了业务处理逻辑；
只要多个组件的业务逻辑一样，就可以用一个高阶组件，把逻辑封装起来，进行复用，把组件当做参数传递进来显示就行。

本质

• 是个函数
• 组件作为参数，可以有其他参数，比如数据源
• 返回一个新组件

使用场景

当多个组件的处理逻辑一样的时候，可以用高阶组件进行封装。但要注意的是，他们的显示方式，数据源可能是不一样的。

• 业务逻辑一样
• 显示方式和数据源可能不一样

Render props

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术。

说白了就是：给组件接受一个函数props，而这个函数返回的是一个组件。组件使用 props 函数返回的组件进行显示。
这样可以在组件外定义显示的内容，组件内的状态数据可以得到重用。

使用场景

共享状态或一个组件的行为封装到其他需要相同状态的组件中。

说白了就是实现对 state 的重用。

两者的关系

通过上面的描述，render props 好像做了和高阶组件同样的事情，但又感觉稍有不同，不细心对比，很难说清楚，下面做一个对比。

相同点

他们都封装了相同逻辑，实现了重用。但程度不同。

区别

属性	高阶组件	render props
本质	一个函数	组件的 props
用途	封装业务逻辑	共享 state
区别	显示不同，数据源可能不同	显示不同

其实render props就是轻量级的高阶组件，他不仅封装了相同的逻辑，连 state 都是一样的，只是显示不同。
因此可以轻易的把 render props 组件封装成高阶组件,只要把组件的 render props 函数的组件通过高阶组件参数的方式传递进来就升级成高阶组件了。

function withMouse(Component) {
  return class extends React.Component {
    render() {
      return <Mouse render={mouse => <Component {...this.props} mouse={mouse} />} />;
    }
  };
}

so easy.