React实现组件扩展机制

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

 快速使用

1.扩展点使用

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

function App() {
    return (
); }

2.扩展点定义

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

import {extensionManager} from "./extension";

extensionManager.register("header", () => 
header
); extensionManager.register("content", () =>
content
); extensionManager.register("footer", () =>
footer
); export default {}

3.使用效果

 React实现组件扩展机制_第1张图片

实现原理

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 ?  : null;
}

你可能感兴趣的:(前端-React,react.js,前端,前端框架)