高阶组件hoc

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

文章介绍了如何在React中通过高阶组件(HOC)来增强组件功能，例如添加鼠标移动事件监听，动态更新xy坐标，并在Abc和Ccc两个组件中复用该功能。

方便组件复用


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)