当前位置：首页 > news >正文

React HOC(高阶组件-补充篇)

news 2025/6/27 7:47:37

HOC(Higher Order Component) 高阶组件

本章可以选择性观看

在使用hooks写法的时候，HOC的场景会缩小
为什么出这一章节，面试的时候还是会问，所以还是得了解下
了解相关的规范，不至于在实际项目开发中不懂理论

什么是高阶组件？

高阶组件就是一个组件，它接受另一个组件作为参数，并返回一个新的组件，（如果你学过Vue的话，跟Vue中的二次封装组件有点类似）新的组件可以复用旧组件的逻辑，并可以添加新的功能。常用于类组件中，虽然目前都是hooks写法会缩小HOC的使用场景，但还是有部分场景会用到(因为人是死的，代码是活的，要灵活变通)🤡。

入门级用法

注意点

HOC不会修改传入的组件，而是使用组合的方式，通过将原组件包裹在一个容器组件中来实现功能扩展
注意避免多层嵌套，一般HOC的嵌套层级不要超过3层
HOC的命名规范：with开头，如withLoading、withAuth等

代码示例

我们以一个权限判断的例子来入门HOC，并且可以灵活的复用这个逻辑。

enum Role {ADMIN = 'admin',USER = 'user',
}
const withAuthorization = (role: Role) => (Component: React.FC) => {// 判断是否具有权限的函数const isAuthorized = (role: Role) => {return role === Role.ADMIN;}return (props: any) => {// 判断是否具有权限if (isAuthorized(role)) {//把props透传给组件return <Component {...props} />} else {// 没有权限则返回一个提示return <div>抱歉，您没有权限访问该页面</div>}}
}const AdminPage = withAuthorization(Role.ADMIN)(() => {return <div>管理员页面</div> //有权限输出
})const UserPage = withAuthorization(Role.USER)(() => {return <div>用户页面</div> //没有权限不输出
})

进阶用法

封装一个通用的HOC，实现埋点统计，比如点击事件，页面挂载，页面卸载等。

封装一个埋点服务可以根据自己的业务自行扩展

trackType表示发送埋点的组件类型
data表示发送的数据
eventData表示需要统计的用户行为数据
navigator.sendBeacon是浏览器提供的一种安全可靠的异步数据传输方式，适合发送少量数据，比如埋点数据,并且浏览器关闭时，数据也会发送，不会阻塞页面加载

const trackService = {sendEvent: <T,>(trackType: string, data: T = null as T) => {const eventData = {timestamp: Date.now(), // 时间戳trackType, // 事件类型data, // 事件数据userAgent: navigator.userAgent, // 用户代理url: window.location.href, // 当前URL}//发送数据navigator.sendBeacon('http://localhost:5173',JSON.stringify(eventData))}
}

实现HOC高阶组件,通过useEffect统计组件挂载和卸载，并且封装一个trackEvent方法，传递给子组件，子组件可以自行调用，统计用户行为。

const withTrack = (Component: React.ComponentType<any>, trackType: string) => {return (props: any) => {useEffect(() => {//发送数据 组件挂载trackService.sendEvent(`${trackType}-MOUNT`)return () => {//发送数据 组件卸载trackService.sendEvent(`${trackType}-UNMOUNT`)}}, [])//处理事件const trackEvent = (eventType: string, data: any) => {trackService.sendEvent(`${trackType}-${eventType}`, data)}return <Component {...props} trackEvent={trackEvent} />}
}

使用HOC高阶组件,注册了一个button按钮，并传递了trackEvent方法，子组件可以自行调用，统计用户行为。

const Button = ({ trackEvent }) => {// 点击事件const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {trackEvent(e.type, {name: e.type,type: e.type,clientX: e.clientX,clientY: e.clientY,})}return <button   onClick={handleClick}>我是按钮</button>
}
// 使用HOC高阶组件
const TrackButton = withTrack(Button, 'button')
// 使用组件
const App = () => {return <div><TrackButton /></div>
}export default App