React 进阶提高 #16 用 Render Props 代替 HOC（高阶组件）

https://www.rails365.net/movies/react-jin-jie-ti-gao-8-gao-jie-zu-jian

https://www.rails365.net/movies/react-jin-jie-ti-gao-10-yong-gao-jie-zu-jian-lai-chong-gou-dai-ma

https://reactjs.org/docs/render-props.html

https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

https://zhuanlan.zhihu.com/p/31267131

重写前

import React from 'react';

const withMouse = (Component) => {
  return class extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={ this.handleMouseMove }>
          <Component { ...this.props } mouse={ this.state }/>
        </div>
      )
    }
  }
}

const App = (props) => {
  const { x, y } = props.mouse
  return (
    <div style={{ height: '100%' }}>
      <h1>The mouse position is ({ x }, { y })</h1>
    </div>
  )
}

const AppWithMouse = withMouse(App)


export default AppWithMouse;

重写后

import React from 'react';
import PropTypes from 'prop-types';

class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired
  }

  state = { x: 0, y: 0 }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={ this.handleMouseMove }>
        { this.props.render(this.state) }
      </div>
    )
  }
}

const Position = ({ x, y }) => {
  return (
    <h1>The mouse position is ({ x }, { y })</h1>
  )
}

const Position1 = ({ x, y }) => {
  return (
    <p>The mouse position is ({ x }, { y })</p>
  )
}

const App = () => {
  return (
    <div style={{ height: '100%' }}>
      <Mouse render={(props) => <Position { ...props } />} />
      <Mouse render={(props) => <Position1 { ...props } />} />
    </div>
  )
}

export default App;