了解render props之前先来回顾一下之前学习过的高阶组件HOC，高阶组件是接收一个组件作为参数，返回一个新的组件。其作用就是提高组件的复用性。今天学习的render props也是为了简化代码，提高组件复用性。

render props 组件接收一个函数，该函数会调用另一个组件而不是直接渲染，有一点我们需要注意，一般一个组件调用另一个组件，是将被调用的组件渲染到该组件中，然后进行硬编码，而render props是接收函数，直接调用函数，其函数输出结果作为 props 传入主组件。

render props的一般格式是：

(

Hello {data.target}

)} />

这里用官方文档中的例子简单说明。获取鼠标当前位置，我们可以定义一个组件

class Cat extends React.Component {

render() {

const mouse = this.props.mouse;

renturn (

}

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 (

{this.props.render(this.state)}

//原本应该直接输出
鼠标的位置为： x: { this.state.x } ; y: { this.state.y }

);

}

}

class MouseTracker extends React.Component {

        render() {

                return (




移动鼠标!

                             ( )}/>



                );

        }

}

上面这个例子的效果是想渲染一个追着鼠标的猫咪的效果。可以看到MouseTracker组件中调用了获取鼠标位置的组件Mouse, 而Mouse组件中使用了 render props ，传入了一个函数， Mouse组件内部是捕获了这个 render props “{this.props.render(this.state)}” 将 this.state 的值绑定到 Mouse 的 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 (

                 ( )}/>

            );

        }

    }

}

render props