Hvad kan du forvente af Hermes Engine i React Native 0.70

Hvad kan du forvente af Hermes Engine i React Native 0.70
Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

React Native 0.70 er ude, og Hermes er den nye standard JavaScript-motor, der leveres med denne opdatering. Her er, hvad du kan forvente af Hermes og nogle af de funktioner, der vil påvirke ydeevnen af ​​din React Native-applikation.





Hvad er Hermes?

Hermes er en open source JavaScript-motor, der optimerer ydeevnen under iOS- og Android-applikationslanceringer ved at prækompilere JavaScript-kode til effektiv bytekode og reducere brugen af ​​applikationshukommelse.



MAKEUSE AF DAGENS VIDEO

Opdatering af ældre React Native-versioner for at understøtte Hermes

React Native-applikationer, der kører på 0.70, vil have Hermes aktiveret som standard. For ældre React Native-applikationer leveres en Hermes-bygning med hver React Native-version fra version 0.60.4 til Android-builds og version 0.64.0 til iOS. De matchende versioner eliminerer risikoen for et afhængighedsmismatch i din React Native-applikation.





For at aktivere Hermes i disse ældre versioner af React Native, skal du tilføje en vis konfiguration til både dine Android- og iOS-applikationer.

På Android skal du redigere din android/app/build.gradle fil:



project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

På iOS foretager du følgende ændringer til din ios/Podfile :

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

iOS kræver, at du installerer Hermes pods efter konfiguration af indstillinger.



hvorfor er min amazon brandpind så langsom

Kør følgende kommando for at installere pods:

cd ios && pod install

Aktiverer Hermes med Expo

Du kan også bruge Hermes-motoren til React Native-applikationer, der er bygget eller kørt ved hjælp af Expo. Expo-biblioteket understøtter Hermes fra SDK version 42 på Android og SDK version 43 på iOS til den nuværende version 0.70. Det er vigtigt at bemærke, at selvstændige applikationer ikke kan køre Hermes, medmindre de er bygget ved hjælp af Expo Application Services Build.



For at aktivere Hermes i en React Native-applikation skal du redigere din app.json fil:

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

Nu vil din applikation bygget med Expo Application Services have Hermes aktiveret som sin JavaScript-motor.

Hermes Performance Optimization for React Native Apps

De fleste JavaScript-motorer analyserer al JavaScript-kildekoden ved hjælp af et JIT (Just in Time) kompileringssystem. JIT-systemet bremser udførelsen, fordi din enhed skal vente på, at hele kompileringsprocessen er fuldført. Hermes bruger en AOT-tilgang (ahead-of-time compilation), der overfører det meste af det tunge JavaScript-motorarbejde til at bygge tid.

Hermes påvirker hovedsageligt tre målinger af applikationsydelse: applikationens TTI (Time to Interactive), binær størrelse og hukommelsesforbrug.

Tid til interaktiv

TTI er den tid, det tager en app at indlæse og understøtte brugerinteraktion som at rulle eller skrive. Hermes forbedrer den gennemsnitlige TTI for React Native-applikationer sammenlignet med andre JavaScript-motorer.

Denne reduktion i TTI skyldes, at Hermes ikke kører en JIT-kompiler.

Binær størrelse

Den binære størrelse er størrelsen på den medfølgende React Native-applikation. Android-applikationer bruger APK-filformat , mens iOS-apps bruger et format, Apple kalder IPA. Brug af Hermes reducerer applikationsstørrelsen markant på Android-enheder.

Hukommelsesbrug

Hukommelsesbrug er en anden kritisk metrik til optimering i applikationer. En applikations brugeroplevelse ville blive negativt påvirket, hvis den bruger for meget hukommelse. Hermes implementerer et Garbage Collector-system, der regulerer hukommelsesforbrug efter behov, hvilket sikrer, at en applikation kun bruger den nødvendige hukommelsesplads, mens den kører.

Debugging React Native med Hermes og Chrome DevTools

Hermes kommer med en ny oplevelse til debugging af React Native-applikationer, der kører på en emulator, simulator eller fysisk enhed ved hjælp af Expo. Hermes understøtter debugging af React Native-applikationer ved hjælp af Chrome DevTools's Inspector Protocol. Du bør ikke forveksle dette med traditionelle JavaScript-fejlretning ved hjælp af browserens konsol .

Følg disse trin for at konfigurere Chrome til at fejlsøge Hermes-applikationer.

  1. Naviger til chrome://inspect inde i din Chrome-browser.
  2. Klik på Konfigurer knap.
  3. Indtast serveradressen for metrobundteren, der kører din React Native-applikation, og klik på den inde i skærmmodalen Færdig .

Du kan nu fejlsøge din React Native-applikation ved at bruge Hermes-målinspektionslinket.

Hvorfor Hermes er optimeret til Only React Native

Hermes' optimale ydeevne som en React Native JavaScript-motor skyldes delvist dets runtime-miljø. I React Native samler du al JavaScript-kode i applikationsmiljøet. Dette system gør forsendelsesbytekode effektiv.

En anden faktor at overveje er mængden af ​​arbejde, der udføres under JavaScript-kompilering. Hermes styrer den hyppige brugerinteraktion, der forventes af mobile applikationer, og undgår samtidig aggressiv bytekode-optimering. En JIT compiler JavaScript-motor ville ikke udføre opgaver på denne måde.