React Native 中如何使用 TurboModules？

推荐答案

在 React Native 中，TurboModules 是一种新的原生模块架构，旨在提高性能和开发体验。以下是使用 TurboModules 的基本步骤：

1. 安装依赖： 确保你的项目已经安装了 React Native 0.68 或更高版本，因为 TurboModules 是从这个版本开始引入的。

2. 创建 TurboModule： 在原生代码中创建一个 TurboModule。对于 iOS，你需要创建一个 Objective-C 或 Swift 类，并实现 RCTTurboModule 协议。对于 Android，你需要创建一个 Java 或 Kotlin 类，并实现 TurboModule 接口。

   iOS 示例：

   // www.javascriptcn.com code example
   #import <React/RCTBridgeModule.h>
   #import <React/RCTTurboModule.h>
   
   @interface MyTurboModule : NSObject <RCTTurboModule>
   @end
   
   @implementation MyTurboModule
   
   RCT_EXPORT_MODULE()
   
   RCT_EXPORT_METHOD(doSomething:(NSString *)input callback:(RCTResponseSenderBlock)callback) {
       // 在这里实现你的逻辑
       callback(@[input]);
   }
   
   @end

   Android 示例：

   // www.javascriptcn.com code example
   package com.example;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.facebook.react.turbomodule.core.interfaces.TurboModule;
   
   public class MyTurboModule extends ReactContextBaseJavaModule implements TurboModule {
       public MyTurboModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Override
       public String getName() {
           return "MyTurboModule";
       }
   
       @ReactMethod
       public void doSomething(String input, Callback callback) {
           // 在这里实现你的逻辑
           callback.invoke(input);
       }
   }

3. 注册 TurboModule： 在 NativeModules 中注册你的 TurboModule，以便在 JavaScript 中可以使用。

   iOS 注册： 在 AppDelegate.m 中：

   // www.javascriptcn.com code example
   #import <React/RCTBridgeModule.h>
   #import <React/RCTTurboModuleManager.h>
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
       RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
       RCTTurboModuleManager *turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge delegate:self];
       [turboModuleManager installJSBindingWithRuntime:bridge.jsExecutor];
       return YES;
   }

   Android 注册： 在 MainApplication.java 中：

   // www.javascriptcn.com code example
   import com.facebook.react.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.uimanager.ViewManager;
   
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   
   public class MyPackage implements ReactPackage {
       @Override
       public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           modules.add(new MyTurboModule(reactContext));
           return modules;
       }
   
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }

4. 在 JavaScript 中使用 TurboModule： 在 JavaScript 中，你可以通过 NativeModules 来访问你的 TurboModule。

   import { NativeModules } from 'react-native';
   
   const { MyTurboModule } = NativeModules;
   
   MyTurboModule.doSomething('Hello', (result) => {
       console.log(result); // 输出: Hello
   });

本题详细解读

TurboModules 的背景

TurboModules 是 React Native 团队为了提高原生模块的性能和开发体验而引入的新架构。传统的原生模块在初始化时会加载所有模块，而 TurboModules 则采用懒加载的方式，只有在需要时才会加载相应的模块，从而减少了启动时间和内存占用。

TurboModules 的优势

1. 性能提升：TurboModules 通过懒加载机制减少了启动时的模块加载时间，提高了应用的启动速度。
2. 类型安全：TurboModules 支持 TypeScript 类型定义，提供了更好的类型检查和代码提示。
3. 简化开发：TurboModules 提供了更简洁的 API 和更好的开发体验，减少了开发者的工作量。

TurboModules 的使用场景

TurboModules 适用于需要高性能和复杂逻辑的原生模块开发，特别是在需要频繁调用原生代码的场景下，TurboModules 可以显著提升应用的性能。

注意事项

1. 兼容性：TurboModules 是从 React Native 0.68 开始引入的，因此在使用之前需要确保项目的 React Native 版本符合要求。
2. 调试：由于 TurboModules 采用了懒加载机制，调试时可能会遇到一些问题，建议在开发过程中使用传统的原生模块进行调试，待功能稳定后再迁移到 TurboModules。

通过以上步骤和解读，你应该能够在 React Native 项目中成功使用 TurboModules 来提高应用的性能和开发体验。