React高阶组件(HOC)

最新推荐文章于 2025-09-04 16:06:14 发布

原创最新推荐文章于 2025-09-04 16:06:14 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了如何使用高阶组件(HOC)为React组件添加通用功能，如签名标记，通过纯函数封装并为组件传递devName属性。通过实例展示了如何在MyComponent1和MyComponent2中应用HOC，并在index.js中组合使用。

问题
如何为多个组件添加相同的附加功能？

定义
高阶组件：High Order Component（简称HOC），是一种为多个React 组件添加公共扩展功能的设计模式，这些扩展功能也称为”横切关注点“

实现
   ① HOC模式不会修改原始组件，也不继承原始组件，而是用函数将原始组件用新功能包装起来组成新组件
   ② HOC封装函数是纯函数，没有任何副作用
   ③ HOC可以为被包装组件添加功能或属性，被包装组件不需要知道这些属性是怎么来的

@component/MyComponent2

import React from 'react'
import withSignature from './withSignature'

 function MyComponent2() {
  return (
    <div>MyComponent2</div>
  )
}
export default withSignature(MyComponent2,"HDJ")

@component/withSignature


export default function withSignature(UserComponent, signature) {
    function NewComponent(props) {
        return (
            <>
                <UserComponent devName={signature} {...props}></UserComponent>
                {/* <hr />
                <div>开发作者:{signature}</div> */}
            </>
        );
    }
    return NewComponent;
}

@component/MyComponent1

import React from 'react'
import withSignature from './withSignature'

 function MyComponent1(props) {
  return (
    <div>MyComponent1
<div>开发作者:{props.devName}</div>


    </div>
  )
}
export default withSignature(MyComponent1,"HDJ")

@index

import React from "react";
import ReactDOM from "react-dom/client";
import MyComponent1 from "./components/MyComponent1";
import MyComponent2 from "./components/MyComponent2";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <>
    <MyComponent1></MyComponent1>
    <MyComponent2></MyComponent2>
    </>
);