Render Props

"Render Props"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

 (
  
Hello {data.target}
)}/>

是不是很简单，更具体地说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
照例，卷起袖子撸代码~~~

 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 (
            

              {/* ...但我们如何渲染 
 以外的东西? */}
              

                The current mouse position is ({this.state.x}, {this.state.y})
              
              {this.props.render(this.state)}
            
          );
        }
      }

      class MouseTracker extends React.Component {
        render() {
          return (
            

              
移动鼠标!
               {
                  if (mouse.x > 500 && mouse.y > 500) {
                    return ;
                  } else {
                    return ;
                  }
                }}
              />
            
          );
        }
      }

      class App extends React.Component {
        render() {
          return (
            

              
            
          );
        }
      }

      ReactDOM.render(, document.getElementById("root"));

实例中，我们在中监听光标在屏幕上移动，获取其位置。然后将 组件（还有 组件）也显示到光标的位置。

以往做法，
可以尝试在 内部的直接渲染组件，采用组合组件的方式实现；
也可以采用HOC(高阶组件)的方式实现。但是这些方式都得创建组件。
如果采用render prop 可以轻松解决。
我们提供了一个 render 方法 让 能够动态决定什么需要渲染，而不是克隆 组件然后硬编码来解决特定的用例。这种实现方式比尝试在 内部的渲染方法渲染 组件要方便的多，不用每次都得创建新的组件。

惊喜

关于 render prop 一个有趣的事情是你可以使用带有 render prop 的常规组件来实现大多数高阶组件 (HOC)。 例如，如果你更喜欢使用 HOC而不是组合组件，你可以使用带有 render prop 的常规 轻松创建一个：

// 如果你出于某种原因真的想要 HOC，那么你可以轻松实现
// 使用具有 render prop 的普通组件创建一个！
function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
         (
          
        )}/>
      );
    }
  }
}

注意点

使用 Props 而非 render

重要的是要记住，render prop 是因为模式才被称为 render prop ，你不一定要用名为 render的 prop 来使用这种模式。事实上， 任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.
尽管之前的例子使用了 render，我们也可以简单地使用 children prop！

 (
  
鼠标的位置是 {mouse.x}，{mouse.y}
)}/>

其他的注意事项可以去官网看看细节，这边就不累赘了（这里的基本够用，但是细节不足，翻阅官网资料就当多看一遍加深印象吧！）
Render Props直通车