‌React Native Turbo Starter：高效加速移动应用开发的创新框架‌

# React Native Turbo Starter：高效加速移动应用开发的创新框架

在移动应用开发中，React Native（RN）凭借“一次编写，多端运行”的理念大受欢迎。然而，随着项目规模增大、性能要求提升，传统的 RN 脚本生成器和 boilerplate 方案往往无法满足“零配置即开箱”以及“高性能”两大需求。为此，社区推出了 **React Native Turbo Starter**——一个集成了 Fabric 渲染管线、TurboModules、Hermes 引擎等现代化技术的全新脚手架，旨在帮助开发者快速搭建高效、可扩展、易维护的移动应用基础架构。

本文将从以下几个方面深度解读 **Turbo Starter**：  

1. [框架概述与核心特性](#一-框架概述与核心特性)  
2. [快速上手：安装与初始化](#二-快速上手安装与初始化)  
3. [核心技术解析：Fabric、TurboModules、Hermes](#三-核心技术解析fabric-turbomodules-hermes)  
4. [项目目录与模块组织](#四-项目目录与模块组织)  
5. [示例代码：快速创建首页与自定义 TurboModule](#五-示例代码快速创建首页与自定义-turbomodule)  
6. [架构图解与数据流示意](#六-架构图解与数据流示意)  
7. [性能优化与实战建议](#七-性能优化与实战建议)  
8. [总结与拓展](#八-总结与拓展)  

---

## 一、框架概述与核心特性

**React Native Turbo Starter**（以下简称“Turbo Starter”）并非普通的 `react-native init` 模板，而是一整套工程化、性能与开发体验兼顾的脚手架。其主要特性包括：  

1. **一键启用 Fabric 渲染管线**  
   - 默认集成 Fabric，自动配置 C++ 层 Shadow Tree、Yoga 布局与 JSI 绑定，极大提升渲染性能与并发能力。  

2. **TurboModules 支持**  
   - 内置 TurboModule 框架，JS 端通过 JSI 直接调用原生模块，无需 JSON 序列化，调用延迟大幅降低。  
   - 提供自动化生成模板，让你只需少量配置即可新增原生模块。  

3. **Hermes 引擎优化**  
   - 默认开启 Hermes，兼容 Android 与 iOS，让 JS 代码启动更快、内存占用更低。  
   - 内置性能剖析脚本，可在调试阶段自动生成采样报告。  

4. **TypeScript + ESLint + Prettier 预配置**  
   - 全面支持 TypeScript，结合 `tsconfig.json`、`eslint`、`prettier` 等最佳实践配置，保证代码一致性。  
   - 自带常见规则：React Hooks 检测、导入排序、变量命名规范等，让团队协作更高效。  

5. **React Navigation v6 与底层架构融合**  
   - 内置 `@react-navigation/native`、`@react-navigation/stack`，并对 Fabric 做了适配，页面跳转更流畅。  
   - 提供示例导航结构，包含常用鉴权流程、Tab 导航、Drawer 导航。  

6. **自动化 Android / iOS 构建配置**  
   - iOS 自动安装 Pod，Android 自动配置 `gradle.properties` 与 `build.gradle`，一键打包即可发布。  
   - 支持 CI/CD 集成，预置 Fastlane 配置，可快速接入自动化发布流程。  

---

## 二、快速上手：安装与初始化

### 2.1 环境要求

- Node.js ≥ 14  
- Yarn ≥ 1.22（建议）  
- React Native CLI  
- Android Studio / Xcode  
- 全局安装 `react-native-turbo-starter-cli`（可选）

### 2.2 安装 Turbo Starter

通过 **npm** 或 **Yarn** 安装全局脚手架：

```bash
# 使用 Yarn
yarn global add react-native-turbo-starter-cli

# 或者 npm
npm install -g react-native-turbo-starter-cli

说明：脚手架包名为 react-native-turbo-starter-cli，在正式使用前需保证无网络缓存冲突。

2.3 初始化项目

执行以下命令创建一个名为 MyTurboApp 的新项目：

turbo-starter init MyTurboApp
cd MyTurboApp

脚手架会自动完成以下步骤：

克隆预置模板仓库：包含 Fabric、TurboModules、Hermes、TS、ESLint 等配置。
安装依赖：node_modules、Pods（iOS）、Gradle 插件（Android）。
生成 Android app/build.gradle 与 iOS Podfile 中与 TurboModules / Fabric 相关配置。
配置 tsconfig.json、.eslintrc.js、prettier.config.js 等。
在 package.json 中添加常用脚本：
- yarn android：编译并运行 Android 模拟器 / 设备。
- yarn ios：编译并运行 iOS 模拟器 / 设备。
- yarn lint：执行 ESLint 检查。
- yarn type-check：执行 TypeScript 类型检查。
- yarn start:perspective：启动 Hermes 采样剖析模式。

初始化成功示例：

✔ Cloned template repository
✔ Installed npm dependencies
✔ Installed iOS Pods
✔ Configured Android Gradle settings
✔ Initialized TypeScript & ESLint config
Project “MyTurboApp” has been created successfully!

三、核心技术解析：Fabric、TurboModules、Hermes

要真正理解 Turbo Starter 的优势，必须先掌握其底层技术栈：Fabric 渲染管线、TurboModules 以及 Hermes 引擎。

3.1 Fabric 渲染管线

Fabric 是 RN 0.62+ 引入的全新渲染架构，将 Shadow Tree 与布局逻辑下沉到 C++ 层，带来更低延迟与并发渲染能力。Turbo Starter 已预先为你配置好 Fabric 环境，以下是核心流程示意：

JS 线程                        C++ 层 (Fabric)                      原生 UI 线程
│                                 │                                  │
│  React Fiber Reconciler          │                                  │
│  - Diff 新旧组件树                 │                                  │
│  - 生成布局指令、UI 操作队列          │                                  │
│    (JS 调用 FabricUIManager.jsi)  │                                  │
│─────────────────────────────────▶│                                  │
│                                 │  Fabric C++ Shadow Tree 渲染           │
│                                 │  - 构建 & 更新 ShadowNode               │
│                                 │  - 调用 Yoga 计算布局                   │
│                                 │  - 生成 View 操作列表                    │
│                                 │────────────────────────────────▶│
│                                 │                                  │  原生 队列入栈
│                                 │                                  │  - createView / updateView / removeView
│                                 │                                  │  - Layout & 绘制
│                                 │                                  │
│                                 │◀──────────────────────────────── │
│  JS 线程可并发调度 (Concurrent)    │                                  │

ShadowNode C++ 实现：Fabric 下的 WebUISingleThreadComponentDescriptor、ConcreteComponentDescriptor 等在 C++ 中维护组件树状态。
JSI 绑定：Turbo Starter 通过 @react-native/fabric 包将 FabricUIManager 作为 Host Object 暴露给 JS，使得 updateProps、dispatchCommand 等调用在 V8/JSI 上下文中同步执行。
布局与渲染：一旦 Shadow Tree 建立或更新，C++ 层会调用 Yoga 计算 x, y, width, height，然后生成最小化的 “UI Block” 列表，直接下发给原生端，减少了 JSON 序列化。

示例：JS 端调用 Fabric 更新

import { FabricUIManager } from '@react-native/fabric';

// 创建一个新的 ShadowNode
const tag = FabricUIManager.createNode(
  'View',          // hostType
  { style: { flex: 1, backgroundColor: '#FFF' } }, // props
  0,               // surfaceId (根组件 id)
);

// 更新属性
FabricUIManager.updateNode(
  tag,
  { style: { flex: 1, backgroundColor: '#F00' } }, // 新 props
);

// 提交变更
FabricUIManager.dispatchViewUpdates(surfaceId);

3.2 TurboModules

在旧架构中，RN 通过 Bridge（JSON 序列化/反序列化）调用原生模块，开销较大。TurboModules 则使用 JSI HostObject/HostFunction，将原生模块“直接挂到 JS 引擎”上，省去了多次上下文切换。

JSI HostObject：一旦应用启动，Turbo Starter 会自动注册所有实现了 TurboModule 接口的原生类，将其绑定到 global.TurboModules 对象下。
按需加载：首次调用 NativeModules.MyModule.doSomething() 时，Turbo Starter 会在 C++ 层加载并实例化该模块，其后调用直接通过指针访问，极大降低调用延迟。

示例：创建自定义 TurboModule（以 Android 为例）

实现 Java 接口

// android/app/src/main/java/com/myapp/MyTurboModule.java
package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.turbomodule.core.interfaces.TurboModule;
import com.facebook.react.turbomodule.core.interfaces.ReactModule;
import javax.annotation.Nonnull;

@ReactModule(name = MyTurboModule.NAME)
public class MyTurboModule implements TurboModule {
  public static final String NAME = "MyTurboModule";
  private ReactApplicationContext reactContext;

  public MyTurboModule(@Nonnull ReactApplicationContext reactContext) {
    this.reactContext = reactContext;
  }

  @ReactMethod(isBlockingSynchronousMethod = true)
  public String getDeviceNameSync() {
    return android.os.Build.MODEL;
  }

  @ReactMethod
  public void showToast(String msg) {
    Toast.makeText(reactContext, msg, Toast.LENGTH_SHORT).show();
  }
}

配置 MyTurboModulePackage

// android/app/src/main/java/com/myapp/MyTurboModulePackage.java
package com.myapp;

import com.facebook.react.turbomodule.core.TurboReactPackage;
import com.facebook.react.turbomodule.core.interfaces.TurboModule;
import java.util.Collections;
import java.util.List;

public class MyTurboModulePackage extends TurboReactPackage {
  @Override
  public List<TurboModule> getModules(ReactApplicationContext reactContext) {
    return Collections.<TurboModule>singletonList(new MyTurboModule(reactContext));
  }

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    return new ReactModuleInfoProvider() {
      @Override
      public Map<String, ReactModuleInfo> getReactModuleInfos() {
        final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
        moduleInfos.put(
          MyTurboModule.NAME,
          new ReactModuleInfo(
            MyTurboModule.NAME,
            "MyTurboModule",
            false, // canOverrideExistingModule
            false, // needsEagerInit
            true,  // hasConstants
            false, // isCxxModule
            true   // isTurboModule
          )
        );
        return moduleInfos;
      }
    };
  }
}

注册到 MainApplication.java

// android/app/src/main/java/com/myapp/MainApplication.java
@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // 添加 TurboModulePackage
  packages.add(new MyTurboModulePackage());
  return packages;
}

JS 端调用示例

// App.tsx
import React, { useEffect } from 'react';
import { Button, View, Text } from 'react-native';
import { NativeModules } from 'react-native';

const { MyTurboModule } = NativeModules;

export default function App() {
  const [deviceName, setDeviceName] = useState<string>('');

  useEffect(() => {
    // 同步调用
    const name = MyTurboModule.getDeviceNameSync();
    setDeviceName(name);
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>设备名称：{deviceName}</Text>
      <Button
        title="显示 Toast"
        onPress={() => MyTurboModule.showToast('Hello from TurboModule!')}
      />
    </View>
  );
}

通过上面步骤，我们实现了一个同步（阻塞）方法 getDeviceNameSync 与异步方法 showToast。JS 侧无须等待异步回调即可同步获取设备名称，提升了性能与开发体验。

3.3 Hermes 引擎

Hermes 是 Facebook 针对 React Native 优化的轻量 JavaScript 引擎，启动快、内存占用低。Turbo Starter 默认在 Android 和 iOS 上启用 Hermes：

# android/app/build.gradle
project.ext.react = [
+  enableHermes: true,  // 启用 Hermes
  entryFile: "index.js"
]

优势
- 首包启动时间比 JSC 快约 30%–40%。
- 生成的 Hermes Bytecode 可以通过 hermesc 预编译，减少运行时解析成本。
- 较低的内存占用，适合低端设备。
调试与剖析
- Turbo Starter 中集成了 hermes-engine Profiler，只需运行：
```
yarn start:perspective
```
  即可生成 .cpuprofile 文件，使用 Chrome DevTools 打开进行深度性能剖析。

四、项目目录与模块组织

初始化完成后，Turbo Starter 会生成如下目录结构（精简示例）：

MyTurboApp/
├── android/               # 原生 Android 项目
│   ├── app/
│   ├── build.gradle
│   └── settings.gradle
├── ios/                   # 原生 iOS 项目
│   ├── Pods/
│   ├── MyTurboApp.xcworkspace
│   └── MyTurboApp.xcodeproj
├── src/
│   ├── assets/            # 图片、icon、字体等静态资源
│   ├── components/        # 通用 UI 组件
│   │   ├── Button.tsx
│   │   └── Header.tsx
│   ├── navigation/        # React Navigation 配置
│   │   ├── AppNavigator.tsx
│   │   └── screens.ts
│   ├── modules/           # 与 TurboModules 绑定的 JS 接口封装
│   │   └── MyTurboModule.ts
│   ├── screens/           # 各功能页面
│   │   ├── HomeScreen.tsx
│   │   └── DetailScreen.tsx
│   ├── services/          # 网络请求、API 封装
│   │   └── api.ts
│   ├── stores/            # 状态管理 (Redux / MobX / Recoil 等)
│   │   └── UserStore.ts
│   ├── styles/            # 公共样式、主题配置
│   │   └── theme.ts
│   ├── utils/             # 工具函数
│   │   └── helpers.ts
│   ├── App.tsx            # 入口组件，挂载 NavigationContainer
│   └── index.js           # 应用注册入口
├── .eslintrc.js           # ESLint 配置
├── tsconfig.json          # TypeScript 配置
├── babel.config.js        # Babel 配置，包含 Fabric & TurboModules 插件
└── package.json

components/：存放应用通用的 UI 组件，皆使用纯函数或 React.memo 进行优化。
navigation/：使用 React Navigation v6，AppNavigator.tsx 定义 Stack.Navigator、Tab.Navigator、Drawer.Navigator 等。
modules/：在 TS 中为每个 TurboModule 创建类型定义与 JS 接口封装，方便在业务代码中调用。
stores/：可根据团队技术选型使用 Redux、MobX 或 Recoil等，一切基于 TypeScript 严格类型。
services/：集中封装网络请求、业务 API 与缓存逻辑，供屏幕或组件调用。
styles/：定义主题色、字体大小、间距统一规范，便于应对深色模式等需求。

五、示例代码：快速创建首页与自定义 TurboModule

下面以一个最常见的“Home → Detail”导航示例，以及如何在页面中调用自定义 TurboModule（如上文的 MyTurboModule）来展示数据。

5.1 配置导航

首先，安装 React Navigation 及其依赖（Turbo Starter 已预置，仅供参考）：

yarn add @react-navigation/native @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context

创建 src/navigation/AppNavigator.tsx：

// src/navigation/AppNavigator.tsx
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

export type RootStackParamList = {
  Home: undefined;
  Detail: { itemId: number; name: string };
};

const Stack = createStackNavigator<RootStackParamList>();

export default function AppNavigator() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: { backgroundColor: '#6200EE' },
        headerTintColor: '#FFF',
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} options={{ title: '首页' }} />
      <Stack.Screen name="Detail" component={DetailScreen} options={{ title: '详情页' }} />
    </Stack.Navigator>
  );
}

在 src/App.tsx 中挂载：

// src/App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

5.2 创建 `HomeScreen`

// src/screens/HomeScreen.tsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../navigation/AppNavigator';
import { useNavigation } from '@react-navigation/native';
import { NativeModules } from 'react-native';

type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;

export default function HomeScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  const { MyTurboModule } = NativeModules;

  const handleNavigate = () => {
    navigation.navigate('Detail', { itemId: 42, name: 'Turbo Starter' });
  };

  const handleGetDeviceName = () => {
    // 调用同步 TurboModule 方法
    const deviceName = MyTurboModule.getDeviceNameSync();
    alert(`设备名称：${deviceName}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>欢迎使用 Turbo Starter 框架</Text>
      <Button title="跳转到详情页" onPress={handleNavigate} />
      <View style={styles.spacer} />
      <Button title="获取设备名称 (TurboModule)" onPress={handleGetDeviceName} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 24, textAlign: 'center' },
  spacer: { height: 16 },
});

5.3 创建 `DetailScreen`

// src/screens/DetailScreen.tsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { RouteProp, useRoute, useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/AppNavigator';
import { StackNavigationProp } from '@react-navigation/stack';

type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>;
type DetailScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Detail'>;

export default function DetailScreen() {
  const route = useRoute<DetailScreenRouteProp>();
  const navigation = useNavigation<DetailScreenNavigationProp>();
  const { itemId, name } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.text}>项目编号：{itemId}</Text>
      <Text style={styles.text}>项目名称：{name}</Text>
      <View style={styles.spacer} />
      <Button title="返回上一页" onPress={() => navigation.goBack()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  text: { fontSize: 18, marginBottom: 12 },
  spacer: { height: 16 },
});

到此，我们已经完成了一个最基本的“首页 → 详情页”导航，并演示了如何调用自定义的 TurboModule 获取设备名称。所有导航和模块调用均在 Fabric + TurboModules + Hermes 的优化下高效运行。

六、架构图解与数据流示意

为了帮助你更直观地理解 Turbo Starter 的整体架构与数据流，下面给出一个 ASCII 图示，展示 JS 线程、C++ Fabric、TurboModules 与原生 UI 线程之间的交互。

┌─────────────────────────────────────────────────────────────────────────┐
│                             JS 线程 (Hermes)                            │
│                                                                          │
│   App.tsx (React Fiber)                                                  │
│   ├─ useEffect → MyTurboModule.getDeviceNameSync()       (Sync Call)     │
│   │   → JSI HostFunction (C++)                                            │
│   │                                                                          │
│   ├─ React Navigation (Home → Detail)                                      │
│   │   → RCNavigtor JSI 调用 FabricUIManager (创建 / 更新页面 Element)    │
│   │                                                                          │
│   └─ 普通业务逻辑 (组件状态更新) → 调用 React 更新 Fiber → 调度 Fabric 渲染  │
│                                                                          │
│                   │                     │                                 │
│     JSI 绑定 / HostFunction       JSI 绑定 / HostObject                    │
│                   ▼                     ▼                                 │
│   ┌─────────────────────────────────────────────────────────────────────┐  │
│   │                    C++ 层 (Fabric + TurboModules)                     │  │
│   │                                                                      │  │
│   │  FabricUIManager                                               TurboModuleManager  │
│   │  ├─ ShadowNode 树管理                                         ├─ 管理 MyTurboModule 捆绑    │
│   │  ├─ 调用 Yoga 计算布局                                         │                           │
│   │  ├─ 生成 UI Operations （createView/updateView/removeView）   │                           │
│   │  ├─ dispatchViewUpdates 将操作列表发送给原生 UI 线程             │                           │
│   │  └─ 接收 JS 侧同步调用 (getDeviceNameSync → Android Build.MODEL) │                           │
│   └─────────────────────────────────────────────────────────────────────┘  │
│                   │                     │                                 │
│                   │ Fabric UI Ops       │ TurboModule 返回数据            │
│                   ▼                     ▼                                 │
│   ┌─────────────────────────────────────────────────────────────────────┐  │
│   │                      原生 UI 线程 (Android / iOS)                      │  │
│   │  ├─ 执行 createView / updateView / removeView 操作                 │  │
│   │  ├─ 原生组件渲染 (UIView / ViewGroup)                              │  │
│   │  ├─ 接收用户触摸事件 → 传回 JS 线程 (JSI / Bridge)                  │  │
│   │  └─ 原生 TurboModule 直接暴露方法 (getDeviceNameSync、showToast)   │  │
│   └─────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

JS 线程：JSX 语法构建虚拟 DOM，React Fiber 调用 JSI 将更新指令直接发送给 Fabric UI Manager 或 TurboModule Manager。
C++ 层 (Fabric + TurboModules)：Fabric 负责 ShadowNode 标记、布局计算与生成 “原生 UI 操作列表”；TurboModuleManager 维护所有原生模块实例，将自身 HostObject 暴露给 JS，支持同步与异步调用。
原生 UI 线程：接收 Fabric 下发的操作列表，依次调用 createView、updateView 或 removeView；同时，原生 TurboModule 方法（如 getDeviceNameSync、showToast）直接被 JSI 调用并返回结果。

整个链路中省略了大量 JSON 序列化开销，JS 与 C++ 在同一进程内通过共享指针通信，从而显著提升性能与响应速度。

七、性能优化与实战建议

即便 Turbo Starter 集成了最前沿的技术，开发者在实际项目中依然需注意以下几项优化建议，以确保应用在不同设备环境下都能拥有流畅体验。

7.1 合理拆分组件与避免无效重渲染

使用 React.memo、useMemo、useCallback 减少重复渲染。
对于大型列表，优先使用 FlatList 并配置 getItemLayout、windowSize、initialNumToRender 等属性。
利用 useTransition（React 18+ 并发）将次要更新（如后台数据加载）标记为可延迟，避免阻塞用户交互。

7.2 精简原生模块调用

虽然 TurboModules 使得调用原生模块非常高效，但如果在渲染循环中频繁调用，也可能造成瓶颈。
尽量将一组操作合并为单次调用，例如：一次性获取多个设备信息，而不是多次同步调用。

7.3 利用 Hermes Profiler 做深度剖析

运行命令：
```
yarn start:perspective
```
生成 .cpuprofile 文件，使用 Chrome DevTools → Performance 面板打开，查看堆栈采样结果。
重点关注：JS 侧长时间运行的函数、布局与渲染瓶颈、频繁触发的 JSI 调用等。

7.4 关注内存泄漏与资源回收

在使用大型图片、音视频等资源时，要及时释放引用，避免 OOM。
对于定时器（setInterval、requestAnimationFrame）的引用要在组件卸载时清除。
尽量使用弱引用（WeakMap / WeakSet）管理缓存数据，避免持久化引用导致内存无法释放。

7.5 持续更新依赖与测试

React Native 及其底层依赖（Fabric、TurboModules、Hermes）还处于快速迭代阶段，保持脚手架依赖与 RN 版本同步。
定期阅读官方 Release Notes，及时迁移已废弃 API。
在 Android 与 iOS 真机上均做性能与兼容测试，尤其关注低端机型与旧系统版本。

八、总结与拓展

本文从零开始介绍了 React Native Turbo Starter，并通过代码示例与架构图解详细讲解了其中的关键技术点，包括 Fabric 渲染管线、TurboModules 调用方式、Hermes 引擎优化、项目目录组织、导航实例、原生模块封装等内容。以下几点可帮助你继续深入：

阅读 Fabric 源码
- 在 node_modules/react-native/ReactFabric 或 RN 源码仓库的 ReactCommon/fabric 目录下查阅 C++ 实现，了解 ShadowNode、ComponentDescriptor、EventPipeline 等细节。
研究 TurboModule 架构
- 关注 ReactCommon/turbomodule/core、ReactNativeHost 中 getTurboModuleManager 的生成逻辑，掌握自动生成原生模块绑定流程。
实践并发特性
- 在 React 18 并发模式下，配合 Turbo Starter 进行 startTransition、useDeferredValue 等 API 的实验，观察在 Fabric 管线下的渲染差异。
参与社区与贡献
- Turbo Starter 虽然功能丰富，但仍处于快速发展阶段，欢迎提 Issue、PR 或参与文档撰写，与社区共同完善脚手架。

通过本文的示例与思路，你已经可以快速上手 Turbo Starter 框架，并创建一个具备高性能、可扩展、易维护的 React Native 项目。后续可根据自身业务需求，结合 Redux、MobX、Recoil、React Navigation 等技术栈，进一步构建完整的移动应用。

‌React Native Turbo Starter：高效加速移动应用开发的创新框架‌

2.3 初始化项目

三、核心技术解析：Fabric、TurboModules、Hermes

3.1 Fabric 渲染管线

3.2 TurboModules

3.3 Hermes 引擎

四、项目目录与模块组织

五、示例代码：快速创建首页与自定义 TurboModule

5.1 配置导航

5.2 创建 `HomeScreen`

5.3 创建 `DetailScreen`

六、架构图解与数据流示意

七、性能优化与实战建议

7.1 合理拆分组件与避免无效重渲染

7.2 精简原生模块调用

7.3 利用 Hermes Profiler 做深度剖析

7.4 关注内存泄漏与资源回收

7.5 持续更新依赖与测试

八、总结与拓展

评论已关闭

推荐阅读

2.3 初始化项目

三、核心技术解析：Fabric、TurboModules、Hermes

3.1 Fabric 渲染管线

3.2 TurboModules

3.3 Hermes 引擎

四、项目目录与模块组织

五、示例代码：快速创建首页与自定义 TurboModule

5.1 配置导航

5.2 创建 HomeScreen

5.3 创建 DetailScreen

六、架构图解与数据流示意

七、性能优化与实战建议

7.1 合理拆分组件与避免无效重渲染

7.2 精简原生模块调用

7.3 利用 Hermes Profiler 做深度剖析

7.4 关注内存泄漏与资源回收

7.5 持续更新依赖与测试

八、总结与拓展

评论已关闭

推荐阅读

5.2 创建 `HomeScreen`

5.3 创建 `DetailScreen`