了解render props之前先来回顾一下之前学习过的高阶组件HOC，高阶组件是接收一个组件作为参数，返回一个新的组件。其作用就是提高组件的复用性。今天学习的render props也是为了简化代码，提高组件复用性。
render props 组件接收一个函数，该函数会调用另一个组件而不是直接渲染， 有一点我们需要注意，一般一个组件调用另一个组件，是将被调用的组件渲染到该组件中，然后进行硬编码，而render props是接收函数，直接调用函数，其函数输出结果作为 props 传入主组件。
render props的一般格式是：
<CustomerComponent render={ data=> (
<h1>Hello {data.target}
)} />
这里用官方文档中的例子简单说明。 获取鼠标当前位置，我们可以定义一个组件
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
renturn (
<img style={{ left: mouse.x, top, mouse.y}}
}
class Mouse extends React.Component {
constructor(props) {
super(props)
this.handleMouseMove = this.handleMouseMove.bind(this)
this.state = {x:0, y:0}
handleMouseMove(event) {
this.setState(
x:event.clientX,
y: event.clientY
)
}
render() {
return (
<div onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
//原本应该直接输出 <p>鼠标的位置为： x: { this.state.x } ; y: { this.state.y }
</div>
);
}
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>移动鼠标!</h1>
<Mouse render={mouse => ( <Cat mouse={mouse} /> )}/>
</div>
);
}
}
上面这个例子的效果是想渲染一个追着鼠标的猫咪的效果。 可以看到MouseTracker组件中调用了获取鼠标位置的组件Mouse, 而Mouse组件中使用了 render props ，传入了一个函数， Mouse组件内部是捕获了这个 render props “{this.props.render(this.state)}” 将 this.state 的值绑定到 Mouse 的 mouse参数中， mouse 参数又通过调用 <Cat mouse={mouse} /> 作为 props 参数传入到 Cat组件中。所以 Cat组件中用了 const mouse= this.props.mouse; 来捕获该值。
开头我们简单提到 高阶组件HOC，这里再贴一个 HOC 结合 render props的方法，实现上面代码相同的功能。
// 如果你出于某种原因真的想要 HOC，那么你可以轻松实现
// 使用具有 render prop 的普通组件创建一个！
function withMouse(Component) {
return class extends React.Component {
render() {
return (
<Mouse render={mouse => ( <Component {...this.props} mouse={mouse} /> )}/>
);
}
}
}
