Hoc Vs Render Props

1、Hoc

import React from 'react'
import ReactDOM from 'react-dom'

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>
  ) 
}

export default withMouse(App);

2、Render Props

import React from "react";
import ReactDOM from "react-dom";

class RenderPropsComponent extends React.Component {
  state = { x: 0, y: 0 };

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

  render() {
    const { x, y } = this.state;
    return (
      <div style={{ height: "100%" }} onMouseMove={this.handleMouseMove}>
        {this.props.render(x, y)}
      </div>
    );
  }
}

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

export default App;