高阶组件hoc

 方便组件复用

import React, { useEffect, useState } from 'react';

function Abc(props) {
    // console.log('a', props.xy);
    return (
        <div>

        </div>
    )
}
function Ccc(props) {
    // console.log('c', props.xy);
    return (
        <div>

        </div>
    )
}

// 高阶组件 HOC 接收一个组件 返回一个新组件的一个函数
// WrappedComponent 传进来的组件
function Hoc(WrappedComponent) {
    return function (props) {
        const [xy, setXy] = useState({
            x: 0,
            y: 0
        })

        useEffect(() => {
            const fn = ({ clientX, clientY }) => {
                setXy({
                    x: clientX,
                    y: clientY
                })
            }

            document.addEventListener('mousemove', fn)

            return () => document.addEventListener('mousemove', fn)
        }, [])

        return (
            <WrappedComponent xy={xy} />
        )
    }
}
export default Hoc(Abc)