函数式接口是提升跨框架逻辑复用兼容性的关键粘合剂，通过将可变行为抽象为参数、外移框架耦合点，使同一业务逻辑可在React、Vue、Svelte等环境中安全调用。
函数式接口本身不直接解决跨框架兼容问题，但它能成为提升逻辑复用兼容性的关键“粘合剂”——核心在于把可变行为抽象为参数，把框架耦合点外移，让同一段业务逻辑在 React、Vue、Svelte 等不同环境中被安全调用。
用函数式接口封装可插拔的业务行为
跨框架组件中最容易随框架变化的部分是事件处理、状态更新、副作用触发等。把这些行为定义为函数式接口，就能在不同框架中传入各自原生实现：
- 定义统一契约，例如：@FunctionalInterface interface OnClickHandler { void handle(String id, boolean isConfirmed); }
- React 中传入：props.onClick ? () => onClickHandler.handle(id, true) : undefined
- Vue 中传入：onClick: (id, confirmed) => onClickHandler.handle(id, confirmed)
- 底层逻辑（如权限校验、日志埋点、API 调用）完全复用，不感知框架差异
结合适配器模式桥接框架生命周期
不同框架对“初始化”“销毁”“响应更新”的语义不同。函数式接口可作为适配器的输入/输出通道，避免硬编码生命周期钩子：
- 声明：interface LifecycleAdapter { Consumer
onMount(); Consumer onUnmount(); } - React 实现：useEffect(() => { adapter.onMount().accept(null); return () => adapter.onUnmount().accept(null); }, [])
- Vue 实现：onMounted(() => adapter.onMount().accept(null)); onBeforeUnmount(() => adapter.onUnmount().accept(null))
- 业务方只需提供函数式逻辑，适配工作由各框架专属模块完成
驱动 Web Components 的行为注入
Web Components 是天然的跨框架载体，但其自定义元素缺乏对框架响应式的原生支持。函数式接口可用于注入外部状态绑定与事件转发逻辑：
- 自定义元素内部预留：this._onValueChange = null; set onValueChange(fn) { this._onValueChange = fn; }
- React 使用时：<my-input on-value-change={(v) => setValue(v)} /> → 自动绑定为 (v) => setValue(v)
- Vue 使用时：<my-input @value-change="handleValueChange" /> → 适配层将事件转为函数调用
- 真正复用的是 handleValueChange 这个函数体，而非模板或响应式语法
规避框架特有类型，强化契约清晰性
函数式接口强制只暴露方法签名，天然屏蔽 React 的 JSX.Element、Vue 的VNode、Svelte 的$state 等类型依赖：
- 错误做法：定义 render: (data: MyData) => JSX.Element → 锁死 React
- 推荐做法：定义 renderAsHtml: (data: MyData) => string 或 renderToContainer: (data: MyData, container: HTMLElement) => void
- 返回字符串或操作 DOM，所有框架都能消费；渲染细节交由各端自行封装
- 配合泛型 + 函数式接口，还能支持类型安全的配置驱动：interface Configurable
{ configure: (cfg: T) => void; }
