1 分钟带你入门 React 公共逻辑抽离 HOC...

function FactoryHOC(Component) {
  class Hoc extends React.Component {
    state = {
      x: undefined,
      y: undefined
    }
    render() {
      return <div onMouseMove={e => {
        this.setState({
          x: e.clientX,
          y: e.clientY
        })
      }}>
        // {...this.props} 完全代理出去
        <Component {...this.props} x={this.state.x} y={this.state.y}></Component>
      </div>
    }
  }
  return Hoc
}
const Mouse = FactoryHOC((props) => <div>mouse{props.x}{props.y}</div>)

function FactoryFunction(props) {
  const [pos, setPos] = useState({ x: '', y: '' })
  return <div onMouseMove={e => {
    setPos({ x: e.clientX, y: e.clientY })
  }}>
    <h1>Function Component</h1>
    {props.fn(pos)}
  </div>
}
export default class extends React.Component {
  render() {
    return <>
      <h1>HOC Component</h1>
      ...
      <FactoryFunction fn={({ x, y }) => <h2>fn Component x:{x} y:{y}</h2>}></FactoryFunction>
    </>
  }
}

function useMouse() {
  const [pos, setPos] = useState({ x: "", y: "" });
  return {
    ...pos,
    onMouseMove(e) { // 将鼠标移动这个功能封装起来
      setPos({ x: e.clientX, y: e.clientY });
    },
  };
}
function MouseHook() {
  const { x, y, onMouseMove } = useMouse();
  return (
    <div>
      <h2>Use Hook </h2>
      <p onMouseMove={onMouseMove}> // 直接挂载onMouseXXX
        hooks component X:{x} Y:{y}
      </p>
    </div>
  );
}