React 组件复用的两种方式

render props 模式

import React from "react";
import "./styles.css";

// 默认
// const Test = (props) => props.children("hello world");
// const App = () => <Test>{(text) => <div>{text}</div>}</Test>;

// render props
const Test = (props) => props.render("hello world");
const App = () => <Test render={(text) => <div>{text}</div>} />;

export default App;

高阶组件

高阶组件(HOC) 是一个函数，接收要包装的组件（参数 WrappedComponent），返回增强后的组件

function withMouse(WrappedComponent){
  class Mouse extend React.Component {
    state = {
      x:0,
      y:0
    }

    // 鼠标移动事件的事件处理程序
    handleMouseMove = e => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }

    // 监听鼠标移动事件
    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    // 推荐：在组件卸载时移除事件绑定
    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }

    render(){
      // return this.props.render(this.state)

      // 在render函数里返回参数组件，把当前组件的状态设置进去，参数组件就可以通过props接收到当前类组件中复用的状态
      return <WrappedComponent {...this.state}  {...this.props} />
    }
  }
  return Mouse
}

哪个组件需要加强，通过调用 withMouse 这个函数，然后把返回的值设置到父组件中即可

 // 在参数组件里可以通过props接收到函数的类组件中复用的状态
function Position(props){
  return (
    <p>
      鼠标位置：{props.x} {props.y}
    </p>
  )
}

// 创建组件：把 position组件进行包装
let MousePosition = withMouse(Position)

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition a="1" />  {/*相当于给高阶组件的类组件Mouse添加的props*/}
            </div>
        )
    }
}

参考文章

• React 组件复用的两种方式：render-props 模式和高阶组件（HOC）