React 实用进阶合集（2）

import React from "react";
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  }
  return HOC;
};
function Component1() {
  return <p>1</p>;
}
function Component2() {
  return <p>2</p>;
}
const Enhansce1 = HOCFactory(Component1);
const Enhansce2 = HOCFactory(Component2);
复制代码

import React from "react";
const findMouse = (Component) => {
  class addMouse extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0,
      };
    }
    handleMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY,
      });
    };
    render() {
      return (
        <div onMouseMove={this.handleMove} style={{ height: "500px" }}>
          {/* 传递 所有props 增加 mouse属性  */}
          <Component {...this.props} mouse={this.state} />
        </div>
      );
    }
  }
  return addMouse;
};
const App = (props) => {
  const { x, y } = props.mouse; //此处接收到mouse 属性
  return (
    <div style={{ height: "500px" }}>
      <h1>
        The mouse position is ({x},{y})
      </h1>
    </div>
  );
};
export default findMouse(App);
复制代码

* 需要注意的事情 
  1、不需要引入 {Component}
  2、注意 高阶组件 结构 
  3、注意 公共逻辑 放在 内层 HOC 内的 
复制代码

import React, { Component } from "react";
class Mouse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0,
    };
  }
  handleMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };
  render() {
    return (
      <div style={{ height: "500px" }} onMouseMove={this.handleMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}
const App_1 = (props) => (
  <div style={{ height: "500px" }}>
    <Mouse
      render={({ x, y }) => (
        <h1>
          The position is ({x},{y},{props.test})
        </h1>
      )}
    ></Mouse>
  </div>
);
export default App_1;
复制代码

<App_1 test="666" />
复制代码