医疗网站做药品是干嘛,档案网站 内容建设,网站建设丨金手指排名,山东省城乡住房和城乡建设厅网站在java中#xff0c;SPI机制是Java中提供的一种服务发现机制。同样#xff0c;前端也很需要这种机制#xff0c;这样可以做到组件可插拔#xff0c;可替换#xff0c;减少相互冗余。 快速使用
1.扩展点使用 通过使用Extension组件定义扩展点#xff0c;通过name标记扩展… 在java中SPI机制是Java中提供的一种服务发现机制。同样前端也很需要这种机制这样可以做到组件可插拔可替换减少相互冗余。 快速使用
1.扩展点使用 通过使用Extension组件定义扩展点通过name标记扩展点。
function App() {return (divExtension nameheader/Extension namecontent/Extension namefooter//div);
}
2.扩展点定义 在约定的init文件中配置自定义的扩展点。
import {extensionManager} from ./extension;extensionManager.register(header, () divheader/div);extensionManager.register(content, () divcontent/div);extensionManager.register(footer, () divfooter/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;
}
