第21章：React Native简介

与React的差异与联系

核心差异

  1. 渲染机制

    • React：基于浏览器DOM，通过虚拟DOM操作真实DOM元素。
    • React Native：使用原生组件（如View、Text）而非HTML标签，通过桥接层调用原生API渲染iOS/Android界面。

  2. 平台特性

    • React Native需处理平台差异（如导航、手势），需使用Platform模块或条件编译（如.ios.js/.android.js文件）。

  3. 样式系统

    • React Native使用类似CSS的样式表，但采用JavaScript对象语法（如StyleSheet.create），且部分属性（如flexbox）行为与Web不同。

共同点

  1. 开发范式

    • 均采用组件化、JSX语法和单向数据流。
    • 共享核心概念（如状态管理、Hooks、Context API）。

  2. 工具链

    • 共用部分工具（如ESLint、Babel、Redux）。
    • 类似的开发体验（热重载、调试工具）。

代码示例对比

// React (Web)
function WebButton() {
  return <button style={{ padding: 10 }}>Click</button>;
}

// React Native
function NativeButton() {
  return <Pressable style={{ padding: 10 }}><Text>Click</Text></Pressable>;
}

迁移与协作建议

  • 复用逻辑：可将业务逻辑抽离为共享库，但UI层需分别实现。
  • 学习成本：熟悉React的开发者能快速上手React Native，但需学习原生组件API。
  • 混合开发：部分项目会嵌入React Native组件到原生应用（如使用TurboModules）。

关键结论：React Native是React在移动端的延伸，共享核心思想但针对原生平台做了适配，适合需要跨平台且追求原生性能的场景。

Last Updated::