Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

React Native 0.70 este disponibil, iar Hermes este noul motor JavaScript implicit care se livrează cu această actualizare. Iată la ce să vă așteptați de la Hermes și câteva dintre caracteristicile care vor afecta performanța aplicației dvs. React Native.

Ce este Hermes?

Hermes este un motor JavaScript open-source care optimizează performanța în timpul iOS și Android aplicația se lansează prin pre-compilarea codului JavaScript într-un bytecode eficient și prin reducerea aplicației folosirea memoriei.

Actualizarea versiunilor native React mai vechi pentru a sprijini Hermes

Aplicațiile React Native care rulează pe 0.70 vor avea Hermes activat în mod implicit. Pentru aplicațiile React Native mai vechi, o versiune Hermes este livrată cu fiecare versiune React Native începând cu versiunea 0.60.4 pentru versiunile Android și versiunea 0.64.0 pentru iOS. Versiunile de potrivire elimină riscul unei nepotriviri de dependență în aplicația dvs. React Native.

instagram viewer

Pentru a activa Hermes în aceste versiuni mai vechi de React Native, va trebui să adăugați o configurație atât la aplicațiile Android, cât și la iOS.

Pe Android, editați-vă android/app/build.gradle fişier:

project.ext.react = [
 EntryFile: "index.js",
 activați Hermes: Adevărat// curățați și reconstruiți dacă se schimbă
]

Pe iOS, faceți următoarele modificări la dvs ios/Podfile:

use_react_native!(
 :cale => config[:reactNativePath],
 :hermes_enabled => Adevărat
)

iOS vă solicită să instalați podurile Hermes după configurarea setărilor.

Rulați următoarea comandă pentru a instala pod-urile:

cd ios && instalarea podului

Activarea Hermes cu Expo

De asemenea, puteți utiliza motorul Hermes pentru aplicațiile React Native create sau rulate folosind Expo. Biblioteca Expo acceptă Hermes de la versiunea SDK 42 pe Android și versiunea SDK 43 pe iOS până la versiunea actuală 0.70. Este important de reținut că aplicațiile autonome nu pot rula Hermes decât dacă sunt construite folosind Expo Application Services Build.

Pentru a activa Hermes într-o aplicație React Native, editați-vă app.json fişier:

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

Acum, aplicația dvs. creată cu Expo Application Services va avea Hermes activat ca motor JavaScript.

Optimizarea performanței Hermes pentru aplicațiile React Native

Majoritatea motoarelor JavaScript analizează tot codul sursă JavaScript folosind un sistem de compilare JIT (Just in Time). Sistemul JIT încetinește execuția deoarece dispozitivul trebuie să aștepte ca întregul proces de compilare să se finalizeze. Hermes folosește o abordare de compilare anticipată (AOT), transferând cea mai mare parte din munca grea a motorului JavaScript pentru a construi timpul.

Hermes afectează în principal trei metrici ale performanței aplicației: aplicația TTI (Time to Interactive), dimensiunea binară și utilizarea memoriei.

Timpul pentru interactiv

TTI este timpul necesar unei aplicații pentru a încărca și a sprijini interacțiunea utilizatorului, cum ar fi derularea sau tastarea. Hermes îmbunătățește TTI-ul mediu pentru aplicațiile React Native în comparație cu alte motoare JavaScript.

Această reducere a TTI se datorează faptului că Hermes nu rulează un compilator JIT.

Dimensiune binară

Dimensiunea binară este dimensiunea aplicației React Native incluse în pachet. Aplicațiile Android folosesc Format de fișier APK, în timp ce aplicațiile iOS folosesc un format pe care Apple îl numește IPA. Utilizarea Hermes reduce semnificativ dimensiunea aplicației pe dispozitivele Android.

Folosirea memoriei

Utilizarea memoriei este o altă măsură critică de optimizat în aplicații. Experiența utilizatorului unei aplicații ar fi afectată negativ dacă folosește prea multă memorie. Hermes implementează un sistem Garbage Collector care reglează utilizarea memoriei la cerere, asigurându-se că o aplicație utilizează doar spațiul de memorie necesar în timpul rulării.

Hermes vine cu o nouă experiență pentru depanarea aplicațiilor React Native care rulează pe un emulator, simulator sau dispozitiv fizic folosind Expo. Hermes acceptă depanarea aplicațiilor React Native folosind Protocolul Inspector al Chrome DevTools. Nu trebuie să confundați acest lucru cu tradițional Depanare JavaScript folosind consola browserului.

Pentru a configura Chrome să depaneze aplicațiile Hermes, urmați acești pași.

  1. Navigheaza catre chrome://inspect în browserul dvs. Chrome.
  2. Faceți clic pe Configurați buton.
  3. În interiorul modalului de pe ecran, introduceți adresa serverului pentru pachetul de metrou care rulează aplicația dvs. React Native și faceți clic pe Terminat.

Acum vă puteți depana aplicația React Native utilizând link-ul de inspectare a țintei Hermes.

De ce Hermes este optimizat pentru Only React Native

Performanța optimă a lui Hermes ca motor React Native JavaScript se datorează parțial mediului său de rulare. În React Native, grupați tot codul JavaScript în mediul aplicației. Acest sistem face expedierea bytecode eficientă.

Un alt factor de luat în considerare este cantitatea de muncă efectuată în timpul compilării JavaScript. Hermes gestionează interacțiunea frecventă a utilizatorului anticipată a aplicațiilor mobile, evitând în același timp optimizarea agresivă a codurilor de octet. Un motor JavaScript al compilatorului JIT nu ar efectua sarcini în acest fel.