Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
React Native 0.70 is uit en Hermes is de nieuwe standaard JavaScript-engine die met deze update wordt geleverd. Dit is wat u van Hermes kunt verwachten en enkele functies die van invloed zijn op de prestaties van uw React Native-toepassing.
Wat is Hermes?
Hermes is een open-source JavaScript-engine die de prestaties tijdens iOS en Android optimaliseert toepassing wordt gestart door JavaScript-code vooraf te compileren in efficiënte bytecode en de toepassing te verminderen geheugengebruik.
Oudere React Native-versies bijwerken om Hermes te ondersteunen
React Native-applicaties die op 0.70 draaien, hebben Hermes standaard ingeschakeld. Voor oudere React Native-applicaties wordt een Hermes-build geleverd met elke React Native-versie vanaf versie 0.60.4 voor Android-builds en versie 0.64.0 voor iOS. De overeenkomende versies elimineren het risico van een afhankelijkheidsmismatch in uw React Native-toepassing.
Om Hermes in deze oudere versies van React Native in te schakelen, moet je wat configuratie toevoegen aan zowel je Android- als iOS-applicaties.
Bewerk op Android uw android/app/build.gradle bestand:
project.ext.reageren = [
entryBestand: "index.js",
inschakelenHermes: WAAR// maak schoon en bouw opnieuw op als u verandert
]
Op iOS brengt u de volgende wijzigingen aan in uw ios/Podfile:
gebruik_react_native!(
:pad => config[:reactNativePath],
:hermes_enabled => WAAR
)
iOS vereist dat je Hermes-pods installeert na het configureren van de instellingen.
Voer de volgende opdracht uit om de pods te installeren:
cd-ios && pod installeren
Hermes inschakelen met Expo
U kunt de Hermes-engine ook gebruiken voor React Native-applicaties die zijn gebouwd of worden uitgevoerd met Expo. De Expo-bibliotheek ondersteunt Hermes vanaf SDK-versie 42 op Android en SDK-versie 43 op iOS tot de huidige versie 0.70. Het is belangrijk op te merken dat zelfstandige toepassingen Hermes niet kunnen uitvoeren, tenzij ze zijn gebouwd met behulp van de Expo Application Services Build.
Om Hermes in een React Native-toepassing in te schakelen, bewerkt u uw app.json bestand:
{
"expo": {
"jsMotor": "Hermes"
}
}
Nu heeft uw applicatie die is gebouwd met Expo Application Services Hermes ingeschakeld als JavaScript-engine.
Hermes Prestatie-optimalisatie voor React Native Apps
De meeste JavaScript-engines ontleden alle JavaScript-broncode met behulp van een JIT-compilatiesysteem (Just in Time). Het JIT-systeem vertraagt de uitvoering omdat uw apparaat moet wachten tot het volledige compilatieproces is voltooid. Hermes gebruikt een AOT-benadering (Ahead of Time Compilation), waarbij het meeste zware JavaScript-enginewerk wordt overgedragen naar bouwtijd.
Hermes heeft voornamelijk invloed op drie maatstaven van applicatieprestaties: de applicatie TTI (Time to Interactive), binaire grootte en geheugengebruik.
Tijd voor interactief
De TTI is de tijd die een app nodig heeft om gebruikersinteractie zoals scrollen of typen te ondersteunen en te laden. Hermes verbetert de gemiddelde TTI voor React Native-applicaties in vergelijking met andere JavaScript-engines.
Deze vermindering van TTI komt doordat Hermes geen JIT-compiler uitvoert.
Binaire grootte
De binaire grootte is de grootte van de gebundelde React Native-toepassing. Android-applicaties gebruiken de APK-bestandsindeling, terwijl iOS-apps een indeling gebruiken die Apple IPA noemt. Het gebruik van Hermes verkleint de applicatiegrootte op Android-apparaten aanzienlijk.
Geheugengebruik
Geheugengebruik is een andere kritische maatstaf om te optimaliseren in applicaties. De gebruikerservaring van een toepassing zou negatief worden beïnvloed als deze te veel geheugen gebruikt. Hermes implementeert een Garbage Collector-systeem dat het geheugengebruik op verzoek reguleert, zodat een applicatie tijdens het draaien alleen de benodigde geheugenruimte gebruikt.
Hermes komt met een nieuwe ervaring voor het debuggen van React Native-applicaties die draaien op een emulator, simulator of fysiek apparaat met behulp van Expo. Hermes ondersteunt het debuggen van React Native-applicaties met behulp van Chrome DevTools's Inspector Protocol. Je moet dit niet verwarren met traditioneel JavaScript-foutopsporing met behulp van de browserconsole.
Volg deze stappen om Chrome te configureren om Hermes-applicaties te debuggen.
- Navigeren naar chroom://inspect in uw Chrome-browser.
- Klik op de Configureren knop.
- Voer in het modale scherm op het scherm het serveradres in voor de metrobundelaar waarop uw React Native-toepassing wordt uitgevoerd en klik Klaar.
U kunt nu uw React Native-toepassing debuggen met behulp van de Hermes target inspect-link.
Waarom Hermes is geoptimaliseerd voor alleen native reageren
De optimale prestaties van Hermes als React Native JavaScript-engine zijn deels te danken aan de runtime-omgeving. In React Native bundel je alle JavaScript-code binnen de applicatieomgeving. Dit systeem maakt verzending bytecode efficiënt.
Een andere factor waarmee rekening moet worden gehouden, is de hoeveelheid werk die is verzet tijdens de JavaScript-compilatie. Hermes beheert de verwachte frequente gebruikersinteractie van mobiele applicaties en vermijdt agressieve bytecode-optimalisatie. Een JIT-compiler JavaScript-engine zou op deze manier geen taken uitvoeren.