React基础之组件复用

1.render props模式
书写规范：在需要复用的组件render()里返回return this.props.render(this.state)或者return this.props.children(this.state);
在使用组件时传入（）的值
注：render和children传入的位置不一样

class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0,
  };
  mouseMoveHandler(e) {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  }
  componentDidMount() {
    window.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
  }
  render() {
    // return this.props.children(this.state);
    return this.props.render(this.state);
  }
}
class App extends React.Component {
  render() {
    return (
      <div>
        <div>render props</div>
        {/* props.render */}
        <Mouse
        render= {mouse =>{
            return(
                <p>{mouse.x}{mouse.y}</p>
            )
        }}
        />
        {/* props.chidren */}
        {/* <Mouse>
            {mouse =>{
                return(
                    <p>{mouse.x}{mouse.y}</p>
                )
            }}
        </Mouse> */}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

2.高阶组件
学习高阶组件前我们需要复习一下高阶函数的概念，高阶函数是不是返回的是一个函数，高阶组件一个意思，返回的是一个组件，而且我们可以理解成高阶组件就是一台机甲，机甲本身是已经修好了的，而可以进去的驾驶员是可以随时替换的。
书写规范
1.约定函数名以with开头
2.因为我们传入的是一个组件，所以参数应该以大写开头

function withMouse(WrappedComponent) {
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };
    moveHandler(e) {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    }
    componentDidMount() {
      window.addEventListener("mousemove", this.moveHandler.bind(this));
    }
    render() {
      return <WrappedComponent {...this.state}{...this.props} />;
    }
  }
  //   防止组件多次复用造成组件重名
  Mouse.displayName = WrappedComponent.name;
  return Mouse;
}
function postion(props) {
  return (
    <div>
      {props.x}
      {props.y}
    </div>
  );
}
let Mousemove = withMouse(postion);
class App extends React.Component {
  render() {
    return <Mousemove></Mousemove>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));