1、组件库概述：什么是跨平台组件库、为什么需要组件库、主流跨平台方案对比
大家好，我是这门课的主讲人。今天咱们聊聊跨平台组件库的「前世今生」。说实话，我刚开始做前端那会儿，移动端开发还是 iOS 和 Android 各玩各的。那时候要做一个功能，得写两套代码，改个样式都得两边同步，别提多痛苦了。
后来跨平台方案慢慢成熟了，组件库也跟着发展起来。嗯，咱们先搞清楚几个基本概念。
1.1 什么是跨平台组件库
说白了，跨平台组件库就是一套能同时在多个平台上运行的 UI 组件集合。你写一次代码，它能跑在 iOS、Android、Web，甚至小程序上。
我个人习惯把它理解成「乐高积木」。每个组件就像一块积木——按钮、输入框、弹窗、列表……你用这些积木拼出完整的界面。而且这些积木在不同平台上会自动适配成原生的样子。
举个例子：
// 一个简单的跨平台按钮组件
<Button
title="点击我"
onPress={handlePress}
type="primary"
/>
这段代码在 iOS 上会渲染成原生 UIButton，在 Android 上会变成原生 Button，在 Web 上就是普通的 HTML 按钮。你不需要关心底层实现，组件库帮你搞定了。
核心要点：跨平台组件库 = 一套代码 + 多端适配 + 原生体验
1.2 为什么需要组件库
这个问题我问过不少新人，有人回答「为了复用」，有人回答「为了统一风格」。都对，但不够全面。
我在项目中遇到过这样一个场景：团队 5 个人同时开发一个 App，每个人写的按钮样式都不一样——有人用圆角，有人用直角，有人用阴影，有人用纯色。最后产品经理崩溃了，说「这看起来像三个公司的产品拼在一起」。
组件库能解决的核心问题有三个：
- 一致性：所有页面用同一套组件，视觉和交互风格统一。用户用起来不会觉得「跳戏」。
- 效率：不用重复造轮子。一个成熟的组件库能覆盖 80% 以上的 UI 场景，开发速度提升 30%-50%。
- 可维护性：要改全局样式？改一个组件就够了。我曾经接手过一个项目，光按钮就有 47 种写法……改起来简直是噩梦。
我的建议：团队超过 3 个人，或者项目周期超过 3 个月，就应该考虑搭建组件库。别等到代码写成一团乱麻再后悔。
1.3 主流跨平台方案对比
现在市面上主流的跨平台方案有四个：React Native、Flutter、Taro、uni-app。我挨个说说我的使用感受。
| 方案 | 技术栈 | 渲染方式 | 平台支持 | 组件生态 | 学习成本 |
|---|---|---|---|---|---|
| React Native | React + JavaScript | 原生渲染 | iOS / Android / Web | 丰富 | 中等 |
| Flutter | Dart | 自绘引擎 | iOS / Android / Web / 桌面 | 中等 | 较高 |
| Taro | React / Vue / 小程序 | 编译转换 | 小程序 / H5 / RN | 中等 | 较低 |
| uni-app | Vue | 编译转换 | 小程序 / H5 / App | 中等 | 较低 |
React Native
我个人最常用的方案。如果你团队里都是 React 开发者，上手会非常快。它通过 JavaScript 桥接调用原生组件，性能接近原生。
不过要注意一点：RN 的组件库虽然多，但质量参差不齐。我曾经踩过一个坑——某个第三方列表组件在 iOS 上丝滑流畅，到 Android 上就卡成 PPT。后来发现是那个组件没做 Android 适配。
避坑指南：选 RN 组件库时，一定要看它是否同时支持 iOS 和 Android，最好有 demo 可以实际跑一下。
Flutter
Flutter 不走原生组件，它自己用 Skia 引擎画 UI。好处是跨平台一致性极强——你在 iOS 上看到的样子，在 Android 上几乎一模一样。
但代价是包体积大。我记得第一次用 Flutter 打 release 包，出来 30 多 MB，吓我一跳。另外 Dart 语言对前端开发者来说需要额外学习。
Taro
Taro 是京东团队出的，主打小程序开发。它能把 React 或 Vue 代码编译成微信、支付宝、百度等各家小程序。
我用 Taro 做过一个小程序项目，体验还不错。最大的优势是「一次编写，多端运行」。但要注意，各家小程序的 API 和组件能力有差异，有些功能需要写条件编译。
// Taro 中的条件编译示例
/* #ifdef H5 */
// 只在 H5 端执行的代码
console.log('这是 Web 环境');
/* #endif */
/* #ifdef MP-WEIXIN */
// 只在微信小程序端执行的代码
console.log('这是微信小程序');
/* #endif */
uni-app
uni-app 是 DCloud 出的，基于 Vue。它和 Taro 思路类似，也是编译转换方案。不过 uni-app 更偏向 Vue 生态，如果你团队用 Vue，选它比较顺手。
我个人的感受是：uni-app 在小程序端的兼容性做得不错，但 App 端的性能不如 RN 和 Flutter。适合快速出原型或中小型项目。
1.4 如何选择
说实话，没有「最好」的方案，只有「最合适」的。我一般会问自己三个问题：
- 团队技术栈是什么？——React 选 RN 或 Taro，Vue 选 uni-app，想学新语言可以试试 Flutter。
- 目标平台有哪些？——只做 App 选 RN 或 Flutter，要做小程序选 Taro 或 uni-app。
- 性能要求多高？——对性能敏感（比如动画、列表滚动）选 Flutter 或 RN，一般业务场景 Taro 和 uni-app 够用。
我的经验：如果你刚开始搭建组件库，建议从 React Native 入手。社区成熟、资料多、坑少。等团队经验丰富了，再考虑其他方案。
好了，这一章就聊到这儿。下一章咱们会深入 React Native 的组件开发，讲讲怎么从零开始写一个跨平台组件。到时候我会分享一些我在实际项目中踩过的坑，保证让你少走弯路。