1、chidren属性方式-组件复用

核心思想：通过props.children传递数据

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

import PropTypes from 'prop-types'
import img from './images/dog.png'


class Mouse extends React.Component {
    //鼠标初始位置
    state = {
        x: 0,
        y: 0
    }
    
    // 鼠标移动事件处理程序
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
 
    componentDidMount() {
      // 监听鼠标移动
        window.addEventListener('mousemove', this.handleMouseMove)
    }
    // 重点
    render() {
        return this.props.children(this.state)
    }
  
    //  组件卸载
    componentDidUnmount() {
        // 解除mousemove事件绑定
        window.removeEventListener('mousemove', this.handleMouseMove)
    }
}

// props校验
Mouse.propTypes = {
    children: PropTypes.func.isRequired
}

class App extends  React.Component {
    render(){
        return(
            <div>
                <Mouse>
                    {
                        (mouse) = > {return <p>坐标： {mouse.x},{mouse.y}</p>}
                    }
                </Mouse>
               
                <Mouse>
                    {
                        mouse = > {
                            return (
                                <img
                                    src={img}
                                    alt="汪汪"
                                    style={{
                                        position: 'absolute',
                                        top: mouse.y - 16,
                                        left: mouse.x - 16
                                    }}
                                />
                            )
                        }
                    }
                </Mouse>
            </div>
        )
    }
}
ReactDom.render(<App />，document.getElementByid('root'))

2、包装方式-组件复用

它是一种基于React 的组合特性而形成的设计模式，也可说是一种技巧，大家都称之为高阶组件

核心思想：创建一个函数，接收需要包装的组件、返回增强后的组件。

import React from 'react'
import ReactDOM from 'react-dom'
import img from './images/dog.png'

// 创建高级组件
function withMouse(WrappedComponent) {
    class Mouse extends React.Component {
        state = {
            x: 0,
            y: 0
        }
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        
        componentDidMount() {
            // 监听鼠标移动事件
            window.addEventListener('mousemove', this.handleMouseMove)
        }
        
        render() {
            // 渲染WrappedComponent时，将state和this.props一起传递给组件
            return <WrappedComponent {...this.state} {...this.props}></WrappedComponent>
        }


        componentDidUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
    }
    // 设置displayName
    Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
    
    return Mouse
}

function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName ||WrappedComponent.name || 'Component'
}

const Position = props => (
    <p>
        坐标：（x: {props.x}, y: {props.y}）
    </p>
)

cont Dog = props => (
    <img
        src={img}
        alt="汪汪"
        style={{
            position: 'absolute',
            top: mouse.y - 16,
            left: mouse.x - 16
        }}
    />
)

// 增强后的组件
const MousePosition = withMouse(Position)
const MouseDog = withMouse(Dog)

class App extends  React.Component {
    render(){
        return(
            <div>
                {/* 渲染组件 */}
                <MousePosition />
                <MouseDog />
            </div>
        )
    }
}
ReactDom.render(<App />，document.getElementByid('root'))