腾讯运营着数十个跨多平台的产品。能够设计可复用的跨平台组件系统的前端工程师能提供巨大的杠杆效应——这道题考察架构思维和对平台差异的实践认知。
定义架构：核心逻辑层（平台无关的状态、校验、格式化）和平台特定的渲染适配器（H5的React、小程序自定义组件、原生的React Native）。
描述组件API契约：用TypeScript定义统一的props接口，必要时支持平台特定扩展。
解释构建管线：monorepo结构，共享源码通过构建时转换编译为平台特定的产物。
解决核心难题：跨平台CSS差异、事件系统不兼容、组件生命周期映射。
我会在monorepo中设计三层架构。底层是"Core"——平台无关的TypeScript模块，处理组件状态、数据校验、格式化和无障碍逻辑。中间层是"Adapters"——各平台的薄渲染层：H5的React组件、小程序的WXML模板配合WXS、原生端的React Native组件。顶层是"Themes"——设计令牌系统（颜色、间距、字体），编译为H5的CSS变量、小程序的WXSS变量和React Native的StyleSheet对象。核心挑战在于样式：我会设计一个"样式原语"抽象——组件用平台中立的对象格式定义样式，构建插件将其转换为目标CSS方言。事件系统方面，定义规范化的事件接口，由各适配器映射到平台事件。构建管线使用自定义Babel插件分析导入并tree-shake未使用的平台代码。测试在CI中使用相同的测试规范但平台特定的测试运行器对三个目标同时执行。
提及腾讯的开源项目如Taro或Omi作为参考，展示对现有方案的了解。
聚焦核心工程难题（CSS标准化、事件映射），而非仅停留在高层架构。
讨论组件库的版本策略——如何安全地跨平台发布破坏性变更。
Taro在构建时通过AST转换将类React的JSX代码编译为小程序的WXML/WXSS、H5的HTML/CSS和React Native组件，通过运行时适配层规范化组件生命周期和事件处理。但复杂的平台特定行为仍需要条件代码。
CSS不一致排第一——flexbox在不同平台表现不同，小程序缺少很多CSS特性。事件时序和冒泡差异排第二。第三是性能：H5上没问题的抽象在小程序上可能因setData瓶颈而过重。