React Native Academy · Lektion

Turbo Native Modules med JSI

Definér en TypeScript-specifikationsfil til et Turbo Native Module, implementér det i Kotlin og Swift ved hjælp af den codegen-genererede grænseflade, og kald modulet synkront via JSI.

Lektion 3 af 413 trin

Turbo Native Modules med JSI er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Problemet med den ældre bridge

Den ældre React Native-bridge serialiserer alle meddelelser mellem JavaScript og native til JSON og deserialiserer dem derefter på den anden side. Denne rundtur tilføjer latenstid for hvert native-kald og blokerer tråde, mens serialiseringen foregår. Ved hyppige kald som rullehændelser eller animationer medfører denne ekstra belastning, at billeder springes over. JSI (JavaScript Interface) blev oprettet for at fjerne denne flaskehals.

Hvad er JSI

JSI (JavaScript Interface) er et letvægtslag i C++, som gør det muligt for JavaScript at have direkte referencer til C++-værtsobjekter. I stedet for at sende en JSON-serialiseret meddelelse gennem bridgen kalder et JS-kald direkte og synkront en C++-funktionsmarkør. Det betyder, at native-kald kan være synkrone, uden kopiering og mange størrelsesordener hurtigere end kald gennem bridgen.

Oversigt over Turbo Modules-arkitekturen

Turbo Native Modules er det nye modulsystem, der er bygget på JSI. De vigtigste forskelle fra ældre moduler er blandt andet: doven indlæsning (moduler initialiseres først, når de tilgås første gang, i stedet for alle ved opstart), typede grænseflader (genereret ud fra en TypeScript-specifikation, så typerne garanteres på begge sider) og muligheden for synkrone kald uden at blokere JS-tråden via JSI. Codegen-værktøjet genererer automatisk standard- og forbindelseskoden i C++ og native-koden.

Skriv TypeScript-specifikationsfilen

Et Turbo Module begynder med en TypeScript-specifikationsfil, der erklærer modulets grænseflade. Denne fil ligger i dit projekt og behandles af react-native-codegen, som genererer native-grænsefladefiler. Specifikationen skal importere TurboModuleRegistry og definere en type, der udvider TurboModule.

// NativeDeviceInfo.ts (spec file)
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getDeviceModel(): string;
  getBatteryLevel(): Promise<number>;
  addListener(eventType: string): void;
  removeListeners(count: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('DeviceInfo');

Kør Codegen for at generere native-kode

Når du har skrevet TypeScript-specifikationen, kører du React Native Codegen for at generere de native-grænsefladefiler. I administrerede Expo-projekter sker dette automatisk under expo prebuild. I almindelige React Native-projekter skal du køre yarn react-native codegen. Codegen opretter Swift-/Kotlin-grænseflader og forbindelseskode i C++ i mappen build/generated, som din native-implementering skal overholde.

# Bare React Native — run codegen manually
cd android && ./gradlew generateCodegenArtifactsFromSchema

# Then check generated files
ls android/app/build/generated/source/codegen/jni/
# NativeDeviceInfoJSI-generated.cpp
# NativeDeviceInfoJSI.h

Implementer modulet i Kotlin

Kotlin-implementeringen skal udvide den codegen-genererede abstrakte klasse (f.eks. NativeDeviceInfoSpec) og tilsidesætte hver metode, der er erklæret i specifikationen. Da signaturerne genereres ud fra TypeScript, er der ingen typeuoverensstemmelse mellem JS og native-koden — codegen håndhæver dem under bygningen i stedet for under kørsel.

// DeviceInfoModule.kt
package com.yourapp

import com.facebook.react.bridge.ReactApplicationContext
import com.yourapp.NativeDeviceInfoSpec

class DeviceInfoModule(context: ReactApplicationContext) :
    NativeDeviceInfoSpec(context) {

    companion object {
        const val NAME = 'DeviceInfo'
    }

    override fun getName(): String = NAME

    override fun getDeviceModel(): String {
        return android.os.Build.MODEL
    }
}

Implementer modulet i Swift

Swift-implementeringen overholder den codegen-genererede protokol (f.eks. NativeDeviceInfoSpec). I modsætning til ældre moduler kræves der ingen separat bridge-.m-fil til Turbo Modules — JSI-laget håndterer bindingen automatisk, når modulet er registreret. Protokollen garanterer, at Swift-metodernes signaturer matcher TypeScript-specifikationen præcist.

// DeviceInfoModule.swift
import Foundation

@objc(DeviceInfoModule)
class DeviceInfoModule: NSObject, NativeDeviceInfoSpec {

  func getDeviceModel() -> String {
    return UIDevice.current.model
  }

  func getBatteryLevel(
    _ resolve: @escaping RCTPromiseResolveBlock,
    reject: @escaping RCTPromiseRejectBlock
  ) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    resolve(UIDevice.current.batteryLevel * 100)
  }
}

Synkrone kald via JSI

En af JSI's største fordele er muligheden for at kalde native-kode synkront fra JS. Når en Turbo Module-metode returnerer en type, der ikke er en Promise (f.eks. string eller number i specifikationen), kan JSI returnere værdien med det samme uden at planlægge et asynkront tilbagekald. Det gør mønstre som synkron læsning af cachede værdier mulige, hvilket ikke kunne lade sig gøre med den ældre bridge.

// TypeScript spec — synchronous return type
export interface Spec extends TurboModule {
  getDeviceModel(): string;  // synchronous
  getBatteryLevel(): Promise<number>;  // still async
}

// Usage in JS — getDeviceModel() is synchronous
import NativeDeviceInfo from './NativeDeviceInfo';

const model = NativeDeviceInfo.getDeviceModel(); // no await needed
console.log('Model:', model);

Aktivér den nye arkitektur

Turbo Modules kræver, at den nye arkitektur er aktiveret i dit projekt. På Android skal du angive newArchEnabled=true i android/gradle.properties. På iOS skal du angive RCT_NEW_ARCH_ENABLED=1 i Podfilen og køre pod install. Expo SDK 50+ aktiverer automatisk den nye arkitektur for projekter med administreret arbejdsgang, der bruger den nyeste konfiguration.

# android/gradle.properties
newArchEnabled=true

# ios/Podfile — add before use_react_native!
ENV['RCT_NEW_ARCH_ENABLED'] = '1'

# Then reinstall pods
cd ios && pod install

Registrer et Turbo Module

Turbo Modules registreres via en TurboModuleManagerDelegate i stedet for en ReactPackage. På Android ændrer du MainApplicationTurboModuleManagerDelegate.kt; på iOS ændrer du RCTAppDelegate.mm. Codegen genererer også en ModuleProvider, som automatisk forbinder modulet, når du følger standardnavngivningskonventionerne.

// Android: MainApplicationTurboModuleManagerDelegate.kt
override fun getModule(
    reactApplicationContext: ReactApplicationContext,
    name: String
): NativeModule? {
    return when (name) {
        DeviceInfoModule.NAME -> DeviceInfoModule(reactApplicationContext)
        else -> null
    }
}

Sammenlign ydeevnen for ældre moduler og Turbo Modules

Benchmarkresultater viser, at Turbo Modules kan være 2–3 gange hurtigere ved hyppige kald end moduler, der bruger den ældre bridge. Forbedringen er tydeligst ved kald, der foretages hurtigt efter hinanden — f.eks. gestushåndteringer eller animationsdrivere. Ved sjældne kald som opsætning af kameraet er forskellen ubetydelig. Migrér til Turbo Modules, når performancekritisk native-kode skal følge med interaktioner ved 60 billeder i sekundet.

// Performance benchmark pattern
const ITERATIONS = 10000;
const start = Date.now();

for (let i = 0; i < ITERATIONS; i++) {
  // Synchronous JSI call
  const model = NativeDeviceInfo.getDeviceModel();
}

const elapsed = Date.now() - start;
console.log('10k JSI calls in', elapsed, 'ms');
// Turbo: ~8ms  vs  Legacy bridge: ~80ms

Hurtigt tjek

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: hvordan JSI fjerner den ekstra belastning fra JSON-serialisering i den ældre bridge, hvordan du skriver en TypeScript-specifikationsfil, som codegen bruger til at generere native-grænseflader og hvordan du implementerer den genererede specifikation i både Kotlin og Swift. Du så også, hvordan du aktiverer den nye arkitektur, og hvilke performancefordele synkrone JSI-kald giver. Nu skal vi se nærmere på asynkrone tilbagekald, promises og native-hændelser.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Turbo Native Modules med JSI” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Turbo Native Modules med JSI”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Turbo Native Modules med JSI”?

Definér en TypeScript-specifikationsfil til et Turbo Native Module, implementér det i Kotlin og Swift ved hjælp af den codegen-genererede grænseflade, og kald modulet synkront via JSI. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Turbo Native Modules med JSI”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Skrivning af et ældre native modul i Kotlin
Skrivning af et ældre native modul i Swift
Turbo Native Modules med JSI
Asynkrone callbacks, promises og hændelser fra native kode

← Tilbage til React Native Academy