React-render props模式

React 中组件复用主要有两种模式，一种是高阶组件另一种就是 render props 模式

这两种方式并不是新的 API ，而是利用 React 自身特点的编码技巧，演化而来的固定模式

render props 模式是一种非常灵活并且复用性非常高的模式，可以将一些特定的行为或功能封装成一个组件供别的组件使用。

主要实现思路：

1. 将要复用的 state 状态和操作 state 的方法封装到一个组件中

2. 使用 复用组件 时为其传递一个函数，通过这个函数来获取 复用组件 中的 state （将 state 暴露到 复用组件的外部）

3. 这个函数的返回值为需要渲染的 UI 内容（渲染的 DOM 结构由传入的函数决定）

举个例子：比如将获取鼠标的坐标、鼠标移动事件封装成一个可复用组件

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import img from './images/tianshi.gif'

// 根组件
class App extends React.Component {
   
  render () {
   
    return (
      <div>
        <h1>App 组件</h1>
        {
   /* 使用 Mouse 组件1，通过 render 属性提供一个函数，函数的返回值为 DOM 结构 */}
        <Mouse render={
   mouse => (
          <div>
            <p>X坐标：{
   mouse.x}，Y坐标：{
   mouse.y}</p>
          </div>
        )} />
        
        {
   /* 使用 Mouse 组件2 */}
        <Mouse render={
   mouse => (
          <img
            src={
   img}
            alt="cat"
            sty