如何编写神奇的「插件机制」

错，就是很像 VueCompositionAPI 和 React Hook 在逻辑解耦方面所做的改进，但是在这个回调函数的写法形态下，好像不太容易做到?

这时候，我回想到社区中一些开源框架提供的插件机制，好像就可以在不深入源码的情况下注入各个回调时机的用户逻辑。

比如 Vite 的插件[1]、Webpack 的插件[2] 甚至大家很熟悉的 Vue.use()[3]，它们本质上就是对外暴露出一些内部的时机和属性，让用户去写一些代码来介入框架运行的各个时机之中。

那么，我们是否可以考虑把「处理每个节点、column、每次 onExpand」 的时机暴露出去，这样让用户也可以介入这些流程，去改写一些属性，调用一些内部方法，以此实现上面的几个功能呢?

我们设计插件机制，想要实现这两个目标：

1. 逻辑解耦，把每个小功能的代码整合到插件文件中去，不和组件耦合起来，增加可维护性。
2. 用户共建，内部使用的话方便同事共建，开源后方便社区共建，当然这要求你编写的插件机制足够完善，文档足够友好。

不过插件也会带来一些缺点，设计一套完善的插件机制也是非常复杂的，像 Webpack、Rollup、Redux 的插件机制都有设计的非常精良的地方可以参考学习。

接下来，我会试着实现的一个最简化版的插件系统。我把插件设计成一个函数，这样每次执行都可以拿到最新的 props 和 context。

context 其实就是组件内一些依赖上下文的工具函数等等，比如 forceUpdate, replaceChildList 等函数都可以挂在上面。

接下来，由于插件可能有多个，而且内部可能会有一些解析流程，所以我设计一个运行插件的 hook 函数 usePluginContainer：

（编辑：宿州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!