React实现组件扩展机制

卡卡舅舅

已于 2024-02-01 18:09:04 修改

阅读量784

点赞数 8

分类专栏：前端-React 文章标签： react.js 前端前端框架

于 2024-02-01 16:30:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37011724/article/details/135964191

版权

前端-React 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在前端利用JavaSPI机制实现组件的可插拔和替换，通过定义扩展点、注册组件并在ExtensionManager中管理，展示了具体使用步骤和实现原理，包括Extension组件的刷新逻辑和全局扩展点管理器的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在java中，SPI机制是Java中提供的一种服务发现机制。同样，前端也很需要这种机制，这样可以做到组件可插拔，可替换，减少相互冗余。

快速使用

1.扩展点使用

通过使用Extension组件定义扩展点，通过name标记扩展点。

function App() {
    return (<div>
        <Extension name="header"/>
        <Extension name="content"/>
        <Extension name="footer"/>
    </div>);
}

2.扩展点定义

在约定的init文件中，配置自定义的扩展点。

import {extensionManager} from "./extension";

extensionManager.register("header", () => <div>header</div>);

extensionManager.register("content", () => <div>content</div>);

extensionManager.register("footer", () => <div>footer</div>);


export default {}

3.使用效果

实现原理

ExtensionManager

这个类是全局的插件管理器，通过内置的map维护扩展点，在扩展点注册或改变后，通过钩子函数重新刷新扩展点组件。

class ExtensionManager {
    constructor() {
        this.extensions = {};
        this.extensionRefreshs = {};
    }

    /**
     * 注册扩展点
     */
    register(key, component) {
        this.extensions[key] = component;
        // 执行刷新函数
        let refresh = this.extensionRefreshs[key];
        if (refresh) {
            refresh();
        }
    }


    /**
     * 获取扩展点
     */
    getExtension(key) {
        return this.extensions[key];
    }

    /**
     * 添加刷新者
     */
    addExtensionRefresh(key, extensionRefresh) {
        this.extensionRefreshs[key] = extensionRefresh;
    }

    init(){
        import("./init")
    }
}

本来想通过react context 以及react state来存储扩展点的，但是react useContext这些hook需要在组件渲染方法内才能调用，这样注册组件功能无法实现，所以直接用js 全局变量实现了。

/**
 * 全局扩展点管理器
 */
const extensionManager = new ExtensionManager();
extensionManager.init();

extensionManager是全局变量；init方法会加载init文件，init文件约定注册扩展点组件。

Extension

扩展点组件会获取extensionManager对应name的组件，并返回。同时设置刷新回调函数(基于react state实现)，在扩展点变更时进行重新渲染。

/**
 * 扩展点组件
 */
const Extension = ({name}) => {
    // 获取扩展点组件
    let Component = extensionManager.getExtension(name);

    // 设置刷新回调
    const [version, setVersion] = useState(0);
    extensionManager.addExtensionRefresh(name, () => {
        setVersion(v => v + 1);
    });

    console.log("Extension:" + name + ",version:" + version);
    // 返回扩展点组件
    return Component ? <Component/> : null;
}