Vad du kan förvänta dig av Hermes Engine i React Native 0.70

Vad du kan förvänta dig av Hermes Engine i React Native 0.70
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

React Native 0.70 är ute och Hermes är den nya standard JavaScript-motorn som levereras med denna uppdatering. Här är vad du kan förvänta dig av Hermes och några av funktionerna som kommer att påverka prestandan för din React Native-applikation.





Vad är Hermes?

Hermes är en JavaScript-motor med öppen källkod som optimerar prestandan under lanseringar av iOS- och Android-applikationer genom att förkompilera JavaScript-kod till effektiv bytekod och minska användningen av applikationsminne.



MAKEUSE AV DAGENS VIDEO

Uppdatering av äldre React Native-versioner för att stödja Hermes

React Native-applikationer som körs på 0.70 kommer att ha Hermes aktiverat som standard. För äldre React Native-applikationer levereras en Hermes-version med varje React Native-version från och med version 0.60.4 för Android-versioner och version 0.64.0 för iOS. De matchande versionerna eliminerar risken för beroendefel i din React Native-applikation.





För att aktivera Hermes i dessa äldre versioner av React Native måste du lägga till en viss konfiguration till både dina Android- och iOS-applikationer.

På Android, redigera din android/app/build.gradle fil:



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

På iOS gör du följande ändringar i din ios/Podfile :

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

iOS kräver att du installerar Hermes pods efter att ha konfigurerat inställningarna.



Kör följande kommando för att installera pods:

cd ios && pod install

Aktiverar Hermes med Expo

Du kan också använda Hermes-motorn för React Native-applikationer som byggts eller körs med Expo. Expo-biblioteket stöder Hermes från SDK version 42 på Android och SDK version 43 på iOS till nuvarande version 0.70. Det är viktigt att notera att fristående applikationer inte kan köra Hermes om de inte är byggda med Expo Application Services Build.



För att aktivera Hermes i en React Native-applikation, redigera din app.json fil:

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

Nu kommer din applikation byggd med Expo Application Services att ha Hermes aktiverad som JavaScript-motor.

Hermes prestandaoptimering för React Native-appar

De flesta JavaScript-motorer analyserar all JavaScript-källkod med ett JIT-kompileringssystem (Just in Time). JIT-systemet saktar ner körningen eftersom din enhet måste vänta på att hela kompileringsprocessen ska slutföras. Hermes använder en kompilering i förväg (AOT) och överför det mesta av det tunga JavaScript-motorarbetet till att bygga tid.

Hermes påverkar huvudsakligen tre mått på applikationsprestanda: applikationens TTI (Time to Interactive), binär storlek och minnesanvändning.

Dags för interaktiv

TTI är den tid det tar för en app att ladda och stödja användarinteraktion som att rulla eller skriva. Hermes förbättrar den genomsnittliga TTI för React Native-applikationer jämfört med andra JavaScript-motorer.

Denna minskning av TTI beror på att Hermes inte kör en JIT-kompilator.

Binär storlek

Den binära storleken är storleken på den medföljande React Native-applikationen. Android-applikationer använder APK-filformat , medan iOS-appar använder ett format som Apple kallar IPA. Att använda Hermes minskar applikationsstorleken avsevärt på Android-enheter.

Minnesanvändning

Minnesanvändning är ett annat kritiskt mått för att optimera i applikationer. En applikations användarupplevelse skulle påverkas negativt om den använder för mycket minne. Hermes implementerar ett Garbage Collector-system som reglerar minnesanvändning på begäran, vilket säkerställer att en applikation bara använder nödvändigt minnesutrymme medan den körs.

Debugging React Native med Hermes och Chrome DevTools

Hermes kommer med en ny upplevelse för felsökning av React Native-applikationer som körs på en emulator, simulator eller fysisk enhet med Expo. Hermes stöder felsökning av React Native-applikationer med Chrome DevTools Inspector Protocol. Du ska inte blanda ihop detta med traditionellt JavaScript-felsökning med webbläsarens konsol .

Följ dessa steg för att konfigurera Chrome för att felsöka Hermes-program.

hur man lägger homebrew på wii
  1. Navigera till chrome://inspect i din Chrome-webbläsare.
  2. Klicka på Konfigurera knapp.
  3. Inuti modal på skärmen, mata in serveradressen för metrobundlern som kör din React Native-applikation och klicka Gjort .

Du kan nu felsöka din React Native-applikation med hjälp av Hermes målinspektionslänk.

Varför Hermes är optimerad för endast React Native

Hermes optimala prestanda som en React Native JavaScript-motor beror delvis på dess körtidsmiljö. I React Native buntar du all JavaScript-kod i applikationsmiljön. Detta system gör fraktbytekod effektiv.

En annan faktor att tänka på är mängden arbete som görs under JavaScript-kompileringen. Hermes hanterar den frekventa användarinteraktion som förväntas av mobilapplikationer samtidigt som man undviker aggressiv bytekodoptimering. En JavaScript-motor för JIT-kompilatorer skulle inte utföra uppgifter på detta sätt.