„Bridggeless Architecture“ iš naujo nustato programos greitį!

„React Native“ oficialiai išleido 0.76 versiją – leidimą, kuris perkelia sistemą į kitą lygį, įgalindamas naują architektūrą kaip numatytąjį nustatymą. Ankstesnėse versijose ši architektūra buvo neprivaloma ir reikalaujama, kad kūrėjai pasirinktų. Tačiau dabar visi nauji „React“ vietiniai projektai bus su šia transformacine architektūra, paprastai vadinama “.Bridgeless“Architektūra. Šis tinklaraštis pasineria į tai, kas daro naująją „React“ gimtąją architektūrą žaidimų keitikliu.

„Bridggeless“ architektūra pastaruosius metus buvo karšta tema ir dėl rimtos priežasties. Bet ką daro „Bridgeless“Iš tikrųjų reiškia, ir kodėl tai svarbu? Norėdami įvertinti naujos architektūros pranašumus, pirmiausia peržiūrėkime ankstesnio modelio apribojimus ir tai, kaip šis atnaujinimas pereina už jų ribų.

Turinys:

Senosios architektūros pakartojimas

Du „React Gative“ pasauliai yra – „JavaScript“ ir gimtoji.
Yra trys gijos:
a. „JavaScript“ gija: Vykdo visas „JavaScript“ paketo kodo vykdymą.
b. Pagrindinis/UI gimtoji gija: Tvarko vietinius modulius ir atnaujinimus vartotojo sąsajai.
c. Fonas/šešėlių gija: Taip pat žinomas kaip jogos gija, ji yra atsakinga už elementų išdėstymo ir išdėstymo apskaičiavimą.

Ryšių terpė tarp „JavaScript“ ir gimtojo kodo yra „tiltas“.
Komponentai yra serijuojami į JSON JS sluoksnyje ir asinchroniškai siunčiami per tiltą į vietinį sluoksnį, kuris vėl deserializuoja kodą ir paverčia komponentą į vietinį komponentą, kurį reikia pateikti ekrane. Taip pat vietinis sluoksnis siunčia JSON, kai įvyksta įvykis.

Spektaklio problemos „React Native“ senojoje architektūroje

Trūkčiojimas ar tušti rėmai
Animacijos metu numesta rėmai
Lėtas paleidimo laikas
Mirgantys rėmai ekrano perėjimuose
Mazgo dubliavimasis ir atminties nutekėjimas
UI gijos blokavimas
Nenuoseklus našumas tarp platformų („iOS“ ir „Android“)

Pagrindiniai naujosios „React Gative“ architektūros tikslai:

Naujoji architektūra yra skirta spręsti ankstesnės versijos apribojimus. Pagrindiniai jo tikslai yra:

🚀 greitesnis paleidimo laikas
⚙️ Luotuvių perteikimo palaikymas
📱 Patobulintas programos reagavimas
🌐 Kryžminio platformos suderinamumas
🛠️ Sumažinta avarijų procentas
💾 Patobulintas atminties valdymas
🔄 Sinchroninis vykdymas

Nauja architektūra

Naujoji „React Native“ architektūra yra visiškas jos pagrindinės sistemos perrašymas, apimantis, kaip pateikiami komponentai, kaip „JavaScript“ abstrakcija bendrauja su vietine abstrakcija ir kaip užduotys/atnaujinimai planuojami įvairiose gijose.

Naujoji architektūra turi 4 pagrindines dalis:

Naujasis gimtasis modulis
Naujasis pateikėjas
Renginio kilpa
Tilto pašalinimas

Naujasis gimtasis modulis

Naujasis vietinis modulis yra visiškai parašytas C ++, kuris daugiausia perrašo, kaip bendrauja JS ir vietinės platformos.

Naujos galimybės:

Sinchroniniai atnaujinimai į ir iš gimtojo vykdymo laiko

JS sluoksnis dabar gali tiesiogiai susisiekti su vietiniu sluoksniu su „JavaScript“ sąsaja (JSI) be asinchroninio tilto. Individualizuoti natūralūs moduliai dabar gali sinchroniškai paskambinti funkcijai, grąžinti vertę ir perduoti tą vertę atgal į kitą natūralų modulio funkciją.

// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
 // ❌ value cannot reference a native object
 nativeModule.doSomething(value);
});

Senojoje architektūroje natūralaus funkcijos skambučio atsakymą galima tvarkyti pateikiant atgalinį ryšį, o grąžintą vertę reikia serializuoti.

// ✅ Sync response from Native Module
const value = nativeModule.getValue();

// ✅ value can be a reference to a native object
nativeModule.doSomething(value);

Naujojoje architektūroje vietinės funkcijos skambučiai ir atsakymai yra sinchroniniai.

Įveskite saugumą tarp JS ir gimtojo kodo

„Codegen“ suteikia galimybę moduliams apibrėžti stipriai įvestą „JavaScript“ ir vietinių sluoksnių sutartį, sumažindama kryžminio tipo klaidas-įprastą avarijų šaltinį įvairių platformų programose-tuo pačiu automatiškai generuodami katilinės kodą.

Kryžminės platformos kodo dalijimasis

Naujoji modulių sistema palaiko „C ++“ modulius, įgalinančius įvairių platformų suderinamumą „Android“, „iOS“, „Windows“ ir „MacOS“. Rašymo moduliai C ++ leidžia geriau valdyti atmintį ir optimizuoti našumą.

Tingus modulio įkėlimas pagal numatytuosius nustatymus

Dabar moduliai yra tingiai pakraunami, sumažindami paleidimo laiką, įkeliant juos į atmintį tik tada, kai reikia, užtikrinant greitą našumą, net didėjant programos sudėtingumui.

Tai palaiko sinchroninius ir asinchroninius atnaujinimus. Šis hibridinis požiūris suteikia reikšmingą reagavimo į taikymą šuolį. Sinchroniniai atnaujinimai užtikrina, kad vartotojo sąveika būtų apdorojama akimirksniu, nelaukiant fono užduočių, sukuriant vientisą ir vietinę patirtį. Tuo tarpu asinchroniniai atnaujinimai leidžia sklandžiai vykdyti fono užduotis, netrukdant pagrindinei vartotojo sąsajai. Šis dvigubo režimo perteikimas smogia tobulai pusiausvyrai tarp našumo ir pritaikomumo, todėl programos jaučiasi greitesnės, sklandesnės ir labai optimizuotos realaus pasaulio scenarijams.

Naujasis pateikėjas: pagrindiniai svarbiausi dalykai

1.Kelių sriegių apdorojimas

Pateikimo užduotys pasiskirsto visuose sriegiuose, atsižvelgiant į prioritetą, sumažinant pagrindinio gijos apkrovą.

Nauda: Kritiniai atnaujinimai (pvz.

2. Nekintamas UI medis

UI saugoma nekintamų momentinių vaizdų metu, užtikrinant saugių sriegių atnaujinimus.
Kelios UI versijos gali būti apdorojamos vienu metu, įgalinant lygiagrečius atnaujinimus ir efektyvų pateikimą

3.Fono apdorojimas su keliais nebaigtais medžiais

Fono atnaujinimai tęsiasi neužblokuodami pagrindinės gijos.
Savybės: Sklandūs perėjimai, lygiagrečiai atnaujinimai ir pertraukiamas apdorojimas, skirtas skubių užduotims.

4.Sinchroninis išdėstymas rašomas

Informaciją apie išdėstymą galima pasiekti akimirksniu per gijas, kad būtų galima greitai atnaujinti (pvz., Pakeitimo patarimai).

Kodėl tai svarbu

Reagavimas: Momentinis vartotojo įvesties tvarkymas.
Neužblokuojantys atnaujinimai: Fono užduotys nesutrikdo vartotojo sąsajos.
Nuoseklumas: Saugi sriegis ir nuspėjama vartotojo sąsaja.

Skysta patirtis: Besiūliai perėjimai ir vizualiai nepertraukiami atnaujinimai.

Renginio kilpa

1.Gerai apibrėžta įvykio kilpa

„Lygns React Gative“ „JavaScript“ sriegių apdorojimas su „React DOM“ ir žiniatinklio standartais, supaprastinant kryžminio platformos kūrimą.
Įgalina nuspėjamą užduoties užsakymą ir geresnį elgesio nuoseklumą tarp „React Dom“ ir „React Gative“.

2.Nauda

Pertraukiami atnaujinimai: Mažo prioriteto užduotys gali būti pristabdytos skubiems vartotojų įvykiams, pagerinti reagavimą.
Žiniatinklio derinimas: Atitinka įvykių, laikmačių ir užduočių žiniatinklio specifikacijas, sustiprindamas susipažinimą ir kodo dalijimąsi.

Naršyklės funkcijų pagrindas: Paruošia reaguoti į gimtąją, kad ateityje palaikytų tokias savybes kaip „MutationObserver“ ir „InterSectionObserver“.

3.Sinchroninis išdėstymas rašomas

Palaiko sinchroninio išdėstymo „UselAyOutEffect“ skaitymą ir atnaujinimus tame pačiame rėmelyje, užtikrinant tikslų UI padėties nustatymą.

Šie pakeitimai daro „React Native“ labiau nuspėjamą, reaguojančią ir suderintą su žiniatinklio kūrimo standartais, sudarydami kelią ateityje patobulinti.

Tilto pašalinimas

Tilto pašalinimas atnešė tiesioginį ryšį tarp „JavaScript“ ir „Native Code“ naudojant „JavaScript“ sąsają.

Šis pašalinimas pagerino paleidimo laiką.

Senojoje architektūroje senojoje architektūroje, norėdami pateikti „JavaScript“ pasaulinius metodus, mums reikės inicijuoti „JavaScript“ modulį paleidžiant, todėl programų paleidimo laikas šiek tiek vėluoja.

// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
 NativeTimingModule.setTimeout(timer);
};

// App.js
setTimeout(() => {}, 100);

Naujoje architektūroje su JSI „React Native“ dabar teikia tiesioginį ryšį tarp „JavaScript“ ir „Gative Code“, apeidamas tilto poreikį. Šis kapitalinis remontas lemia:

Greitesnis paleidimo laikas: Moduliams nebereikia anksti inicijuoti „JavaScript“, supaprastinant programos paleidimą.
Patobulinta ataskaitų apie klaidas: Patobulinta „JavaScript“ avarijų diagnostika palengvina derinimą, ypač pradedant programą.
Sumažintos avarijos: Neapibrėžto elgesio, susijusio su tiltu, pašalinimas padidina APP stabilumą.

// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);
// App.js
setTimeout(() => {}, 100);

Atgalinio suderinamumo ir ateities planų

Nors naujoji architektūra sumažina priklausomybę nuo tilto, ji išlieka prieinama atgaline suderinamumui, užtikrinant, kad kūrėjai galėtų migruoti savo tempu. Laikui bėgant tiltas bus visiškai palaipsniui panaikintas, nes programos priima naują architektūrą.

Laipsniška migracija, kad reaguotų vietinei 0,76

React Native 0.76 įgalina Nauja architektūra ir Reaguoti 18 Pagal numatytuosius nustatymus, tačiau visiškam priėmimui reikia laipsniško perkėlimo, kad būtų galima atrakinti visas naudą, įskaitant lygiagrečias funkcijas.

Pagrindiniai taškai

Pradinis atnaujinimas: Dauguma programų gali atnaujinti iki 0,76 įprastomis pastangomis. Sąveikos sluoksnis užtikrina, kad programos veiktų naujoje architektūroje, vis dar palaikant senąjį kodą.
Interop sluoksnio apribojimai: Individualūs šešėlių mazgai ir lygiagrečios savybės nepalaikomos interoponiniu sluoksniu.
Tuo pačiu metu reaguojama parama: Norėdami naudoti lygiagrečias funkcijas, programos turi sekti Reagavimo taisyklės ir perkelkite „JavaScript“ kodą naudodami „React 18“ atnaujinimo vadovą.

Migracijos strategija

Atnaujinkite į naują architektūrą, nesulaužydami esamo kodo.
Palaipsniui perkelkite modulius ir paviršius į naują architektūrą.
Visiškai perkeltas, įgalinkite naujų ir atnaujintų paviršių lygiagrečias funkcijas.

Bibliotekos palaikymas

Virš 850 Populiarios bibliotekosįskaitant tuos, kurie turi 200k+ savaitinius atsisiuntimus, jau yra suderinami.
Patikrinkite bibliotekos suderinamumą „Reactnative.Directory“.

Išvada

Migracija į „React Native 0.76“ ir naujoji jos architektūra yra didelis šuolis į priekį kūrėjams, siūlanti patobulintą našumą, sklandesnes darbo eigas ir prieigą prie šiuolaikinių funkcijų, tokių kaip tuo pat metu vykstanti „React“. Pateikdamas sklandų sąveikos sluoksnį, „React Native“ užtikrina, kad esamos programos galėtų pereiti be sutrikimų, tuo pačiu leisdama kūrėjams palaipsniui pritaikyti visą naujos architektūros pranašumus savo tempu.

Tvirtas „React“ vietinės bendruomenės ir plačiai suderinamo bibliotekos suderinamumo palaikymas, šis atnaujinimas žymi pagrindinį žingsnį link greitesnio, reagavimo ir ateityje paruoštos sistemos. Priimdami šiuos pakeitimus, kūrėjai gali sukurti aukštos kokybės, keičiamas programas, kurios pasitelkia geriausius tiek vietinių, tiek žiniatinklio kūrimo praktikas.

Source link