render prop

Problem

借用react官网的例子，当我们需要一个<Mouse>组件的时候，我们直接去实现它，我们初始的目标是为了实现一个移动鼠标同时可以显示鼠标位置，通过封装可以实现，如下：

    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 style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

                {/* ...但我们如何渲染 <p> 以外的东西? */}
                <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
            </div>
            );
        }
    }

    class MouseTracker extends React.Component {
        render() {
            return (
            <div>
                <h1>移动鼠标!</h1>
                <Mouse />
            </div>
            );
        }
    }

但是实现了上面的<MouseTracker>组件后，需求又变了，我们需要实现的不只是显示鼠标位置了，同时需要在该位置上显示一个<Cat>组件，这意味着我们需要再次却封装一个新的组件<MouseWithCat>，在这个组件里面包含了<Cat position={x: this.state.x, y: this.state.y} />，其目的就是为了<Cat>组件可以使用<Mouse>组件内部的状态，但是这就需要我们必须去再次封装一个新的组件，如果最后需要的有各式各样的要求，针对每一个要求都去实现一个新的组件，而且这些组件都充斥着大量重复的代码，这样的工作是无意义的，且会造成代码的冗长。

    // 这里我们实现了<MouseWithCat>，那如果我们还需要<MouseWithDog>呢？是不是还要再把这一套代码再写一遍？这明显是重复的工作
    class MouseWithCat 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 style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

                {/*
                我们可以在这里换掉 <p> 的 <Cat>   ......
                但是接着我们需要创建一个单独的 <MouseWithSomethingElse>
                每次我们需要使用它时，<MouseWithCat> 是不是真的可以重复使用.
                */}
                <Cat mouse={this.state} />
            </div>
            );
        }
    }

Solution （render props)

我们可以提供一个带有函数 prop 的 <Mouse> 组件，它能够动态决定什么需要渲染的，而不是将 <Cat> 或是 <Dog> 硬编码到 <Mouse> 组件里，并有效地改变它的渲染结果，这样就避免了大量重复的代码

    // 首先修改<Mouse>组件的代码，在最后render的内容区域留一块用来render将要传进来的内容
    class Cat extends React.Component {
        render() {
            const mouse = this.props.mouse;
            return (
            <img src="/cat.jpg" style={{ position: 'absolute', 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 style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

                {/*
                Instead of providing a static representation of what <Mouse> renders,
                use the `render` prop to dynamically determine what to render.
                */}
                {this.props.render(this.state)}
            </div>
            );
        }
        }

        class MouseTracker extends React.Component {
        render() {
            return (
            <div>
                <h1>移动鼠标!</h1>
                // 使用时就在<Mouse>组件上设一个函数形式的prop，当然这个属性名字可以随便取，只要和前面对应上就OK，特殊情况，把这个的名字设为children的时候，可以写成这样的形式
                <Mouse>
                    {
                        mouse => (<Cat mouse={mouse} />)
                    }
                </Mouse>
                // 上下两种情况对于prop是children的情况是等价的
                <Mouse render={mouse => (<Cat mouse={mouse} />)}/>
            </div>
            );
        }
    }