React-Native快速入门

发表于 更新于 阅读次数：

一、简述题

  • 请简单介绍下React Native的优点和缺点。

React Native (RN) 是 Facebook 推出的跨平台移动应用开发框架，允许开发者使用 JavaScript/TypeScript 和 React.js 语法开发接近原生性能的 iOS 和 Android 应用。以下是它的主要 优点 和 缺点：

✅ React Native 优点

  1. 跨平台开发，节省成本

    • 一套代码可同时运行在 iOS 和 Android（需少量平台适配）。
    • 减少团队规模，降低开发和维护成本。

  2. 接近原生的性能

    • 通过 原生组件渲染（如 View 对应 UIView/AndroidView），性能优于纯 Hybrid 框架（如 Cordova）。
    • 关键逻辑可通过 原生模块（Native Modules） 优化。

  3. 热更新（Hot Reload）

    • 修改代码后实时预览，无需重新编译安装，提升开发效率。

  4. React 生态支持

    • 复用 React 的组件化思想、状态管理（Redux/MobX）、工具链（ESLint、Webpack 等）。
    • 丰富的第三方库（如 React Navigation、React Native Paper）。

  5. 社区活跃，大厂背书

    • Facebook、Instagram、Shopify、Discord 等公司使用，社区文档和解决方案丰富。

  6. 逐步支持新平台

    • 可扩展至 macOS、Windows、Web（通过 React Native for Web）。

❌ React Native 缺点

  1. 性能仍有瓶颈

    • 复杂动画、高频交互（如游戏、视频编辑）仍需依赖原生代码。
    • 跨平台通信（JS ↔ Native）存在延迟。

  2. 原生依赖问题

    • 部分功能（如蓝牙、特定传感器）需自行开发原生模块。
    • 第三方库可能因平台差异需要额外适配。

  3. 调试体验较差

    • 错误信息不如原生开发直观，Debug 依赖 Chrome DevTools 或 Flipper。
    • iOS 和 Android 的差异可能导致隐式 Bug。

  4. “JavaScript 疲劳”

    • 需要掌握 React、RN 特定语法、Native 基础（如 Xcode/Android Studio 配置），学习曲线较陡。

  5. 升级兼容性问题

    • RN 版本升级可能破坏现有项目，依赖库也需要同步更新。

  6. 启动时间略长

    • JS Bundle 解析需要时间，冷启动比纯原生应用稍慢（可通过预加载优化）。

⚖️ 适用场景

  • 推荐：中低复杂度应用（社交、电商、工具类）、需要快速迭代的项目、团队已有 Web 前端经验。
  • 不推荐：高性能需求应用（游戏、AR/VR）、强依赖平台特性的功能（如 iOS 3D Touch）。

🌰 典型案例

  • 成功案例：Facebook、Instagram、Shopify、Discord、Tesla（部分功能）。
  • 失败案例：Airbnb（后弃用 RN，回归原生开发，主要因性能和复杂定制化需求）。

总结

React Native 适合追求 开发效率 和 跨平台一致性 的团队，但在性能和深度定制化方面需权衡。如果团队有 React 基础，RN 是移动开发的优秀选择；若追求极致性能，则需混合开发（部分 RN + 原生代码）或直接使用原生技术。

  • 请简述React Native的新旧架构，以及新架构在哪方面进行提升。

React Native 的新旧架构对比

React Native（RN）的新旧架构主要是为了解决旧架构的性能瓶颈和复杂性。旧架构（Bridge）依赖 JavaScript 和原生（iOS/Android）之间的异步通信，而新架构（Fabric + TurboModules + JSI）采用更现代化的技术，提升了性能、开发体验和跨平台一致性。

1. 旧架构（Bridge 架构）

核心机制

  • Bridge（桥接层）

    • JavaScript 和原生代码通过异步 JSON 序列化通信（存在额外序列化/反序列化开销）。
    • 所有跨平台调用都要经过 Bridge，带来性能瓶颈（如丢帧、高延迟）。

  • 架构流程

    1
    JS Thread → (JSON) → Bridge → Native Modules → UI Thread
    • JS Thread：运行 React 逻辑（组件、状态管理）。
    • Native Modules：调用原生 API（如相机、蓝牙）。
    • UI Thread：主线程用于渲染界面。

旧架构问题

  1. 性能问题

    • Bridge 通信是异步的，高频交互（如滚动列表、动画）可能卡顿。
    • 数据需要序列化为 JSON，增加了额外开销。

  2. 启动时间慢

    • JS Bundle 需在启动时加载并初始化 Bridge。

  3. 难以优化

    • 同步调用原生代码困难（如测量视图尺寸需异步返回）。

  4. 强依赖原生线程

    • UI 更新必须通过主线程，无法充分利用多线程。

2. 新架构（Fabric + TurboModules + JSI）

Facebook 从 React Native 0.68 开始逐步启用新架构，主要基于以下技术：

（1）JSI（JavaScript Interface）

取代 Bridge，直接让 JavaScript 和 Native 代码共享内存：

  • 直接调用原生方法（无需序列化）。
  • 支持同步通信（如测量视图尺寸可立即返回）。

（2）Fabric（新渲染引擎）

优化 UI 渲染流程：

  • 同步渲染：JS 可直接调用原生组件，减少丢帧。
  • 视图拍平（View Flattening）：优化嵌套层级，提升渲染性能（类似 Flutter 的渲染机制）。
  • 跨平台一致性：iOS 和 Android 使用相同的渲染逻辑，减少平台差异。

（3）TurboModules

改进原生模块的加载和调用：

  • 按需加载：原生模块在首次使用时初始化（加快启动速度）。
  • 类型安全：通过 CodeGen 自动生成类型定义（TypeScript/Flow），减少运行时错误。

3. 新架构的优化点

优化方向 旧架构（Bridge） 新架构（Fabric + JSI）
通信方式 异步 JSON 序列化 直接内存共享（JSI）
UI 渲染 异步，依赖主线程 同步，减少丢帧
启动性能 慢（Bridge 初始化） 快（TurboModules 按需加载）
原生调用 必须通过 Bridge 直接调用（C++ 绑定）
跨平台一致性 需要手动适配 Fabric 统一渲染逻辑
调试体验 依赖 Bridge 日志 更接近原生开发体验

4. 新架构的实际收益

  1. 性能提升

    • 滚动列表（如 FlatList）更流畅，减少丢帧。
    • 动画和手势交互更跟手。

  2. 更快的启动速度

    • TurboModules 延迟加载原生代码，减少 TTI（Time-To-Interactive）。

  3. 更好的跨平台开发体验

    • Fabric 减少 iOS/Android UI 差异，减少兼容性代码。

  4. 更接近原生的能力

    • 可以直接访问 C++ 层（如集成 C++ 库），扩展性更强。

  5. 未来可扩展性

    • 支持 React 18 并发渲染（如 Suspense）。
    • 更易集成原生新特性（如 SwiftUI、Compose）。

5. 如何启用新架构？

  1. React Native ≥ 0.68 开始支持，需手动开启：
    1
    2
    3
    # 在 RN 项目根目录执行
    npx react-native enable-hermes
    npx react-native enable-new-arch
  2. 升级依赖库，确保第三方库（如 react-navigation）支持新架构。

总结

✅ 新架构优势：性能更高、启动更快、渲染更流畅、跨平台更一致。
⚠️ 注意事项：部分旧库需适配，升级时需测试兼容性。

新架构标志着 RN 从“能用”到“高效能用”的转变，适合追求接近原生体验的中大型应用开发 🚀。