React Native：它是什么、Bridge如何工作以及JavaScript环境

什么是React Native

React Native — 是由Facebook团队（现Meta）创建并于2015年以开源方式发布的框架。与混合方法（Cordova、Ionic）不同，React Native不使用WebView。相反，JavaScript组件映射到原生UI元素：View -> UIView / android.view.View、Text -> UILabel / TextView、ScrollView -> UIScrollView / ScrollView。

第一个版本的React Native仅支持iOS。Android支持于2016年添加。版本0.60 (2019)引入了Autolinking——自动连接原生依赖。React Native 0.68 (2022)添加了新的Fabric + TurboModules架构。当前稳定版本0.74 (2024)已完全迁移到New Architecture架构，支持Yoga 3.0用于Flexbox布局。

根据Statista 2024的数据，React Native用于38%的跨平台项目。使用该框架的包括Discord、Instagram、Shopify、Pinterest、Skype和Uber Eats。Meta在Facebook和Instagram中使用React Native——这是拥有20亿用户的主要移动应用。

React Native的历史和演变

React Native于2015年1月在React.js Conf上宣布。理念是将React的声明式范式从网络迁移到移动平台。仓库中的第一次提交发生在2013年，作为Facebook的内部项目，用于在iOS上创建Facebook Groups应用程序。

0.70版本 (2022)引入了Hermes作为默认的JavaScript引擎。Hermes是一个具有预编译 (AOT)的引擎，针对移动设备进行了优化。与JavaScriptCore相比，它将应用程序启动时间减少50%%，并将APK大小减少30%%。Hermes支持ES6和部分ES2020。

React Native与React Web的区别

React Web通过ReactDOM将组件渲染到DOM元素 (div, span, p)。React Native渲染到平台的原生组件。代替<div>的是<View>，代替<span>的是<Text>。样式通过StyleSheet.create()对象设置，该对象会被转换为平台的CSS属性。Flexbox通过Yoga引擎默认启用。

React Native中的导航与网络不同。代替react-router-dom的是React Navigation——一个支持Stack、Tab和Drawer导航器的原生库。React Navigation 6.x使用原生动画 (useNativeDriver)和与Deep Links的集成。对于iOS UINavigationController和Android Fragment屏幕的原生导航，使用来自Wix的react-native-navigation库。

React Native架构

React Native架构传统上围绕Bridge建立——JavaScript环境和原生代码之间的异步JSON通道。从版本0.68开始，Meta引入了New Architecture，它用JSI (JavaScript Interface)和Fabric取代了Bridge。让我们来看看这两种模型。

Bridge和Fabric

Bridge——是一个序列化的JSON协议，在多个线程中工作：JS Thread (React代码解释)、Main Thread (UI)和Native Modules Thread (API)。JS和原生代码之间的每次交互都要经过对象的序列化和反序列化，这在频繁调用时会导致延迟。在滚动包含1000个元素的列表时，Bridge每秒生成最多10,000条JSON消息。

Fabric——React Native中的新渲染系统。不Bridge不同，Fabric使用C++ Shadow Tree，通过JSI与UI线程同步。这消除了JSON序列化：原生C++代码直接调用JavaScript环境中的函数，反之亦然。Fabric将渲染延迟从16毫秒 (Bridge)降低到2-4毫秒。

TurboModules——New Architecture的第二部分。在旧模型中，所有原生模块都在应用程序启动时加载。TurboModules采用懒加载 (lazy loading)——仅当JS代码首次请求时才加载模块。这将拥有20+个原生模块的应用程序中的冷启动时间减少40%%。

React Native应用示例

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

原生模块

原生模块——是从JavaScript调用平台API的机制。如果React Native标准组件未覆盖某功能 (相机、蓝牙、生物识别)，开发者可以用Swift/Kotlin编写模块，并通过RCTBridgeModule或TurboModule注册。原生函数通过NativeModules.CameraModule.takePhoto()从JS调用。

React Native提供了现成的原生模块，用于访问加速度传感器 (react-native-sensors)、地理定位 (@react-native-community/geolocation)、生物识别 (react-native-biometrics)和本地通知 (@notifee/react-native)。对于自定义场景，Expo提供了Expo Modules API——一个更简单的接口，无需Xcode或Android Studio即可创建原生模块。

React Native的优势

庞大的社区——React Native在跨平台框架中拥有最大的社区。在GitHub上，该项目拥有117,000+颗星星、1800+贡献者。npm每周下载react-native超过3百万次。关于React Native的问题占Stack Overflow移动开发部分所有问题的5%%。

JavaScript生态系统——React开发者使用与网络相同的工具：npm、Babel、ESLint、Prettier、Jest、TypeScript。业务逻辑可以在Web版本 (React)和移动应用 (React Native)之间复用。Redux、Zustand、React Query、React Hook Form等库可在两个平台上无缝运行。

Expo——是一套简化React Native开发的SDK和工具。Expo提供现成的模块 (相机、通知、地图、OAuth)、云构建 (EAS Build)和OTA更新 (EAS Update)。Expo Go允许无需Xcode和Android Studio即可在物理设备上运行应用。根据Expo 2024的数据，70%%的新React Native项目使用Expo。

OTA更新——通过Expo Update和CodePush (Microsoft)可用的功能。开发者可以直接将JavaScript包更新发送给用户，无需经过App Store或Google Play的审核。这将严重错误的修复时间从2-5天 (等待审核)缩短到1-2小时。

TypeScript支持从React Native 0.71开始默认启用。项目模板包含tsconfig.json、所有组件的类型以及对strict mode的支持。Flow (Facebook的静态类型检查)也受支持，但Meta官方推荐TypeScript。根据State of React Native 2024调查，TypeScript模板占新项目的85%%。

生态系统和流行库

npm——React Native的主要包注册表。库的搜索按关键词react-native过滤。安装使用npm install或yarn add。React Native CLI自动链接原生依赖 (从版本0.60开始)。对于Expo项目，安装由expo install管理，它会选择库的兼容版本。

关键库

@react-navigation/native——React Native中导航的事实上标准。该库包含Stack Navigator (动画过渡)、Tab Navigator (iOS/Android的底部菜单)、Drawer Navigator (侧边栏菜单)和Material Top Tab。React Navigation 7.x (2024)引入了静态路由配置和对React 18的完整支持 (包括useSyncExternalStore)。

react-native-reanimated——高性能动画库。Reanimated 3.x在UI线程中执行动画 (worklet)，从而跳过JS线程。这确保即使动画100+个元素也能保持60 FPS。useSharedValue、useAnimatedStyle和withSpring取代了标准包中的Animated API。Reanimated通过react-native-gesture-handler处理触摸手势。

@tanstack/react-query——服务器状态管理库。React Query缓存API响应，在网络变化时自动重新请求数据 (refetchOnReconnect)，并通过useInfiniteQuery支持分页。5.x版本包含为UX优化的乐观更新——界面在接收到服务器响应之前即更新，然后进行纠正。