O prezentare generala a caracteristicilor si actualizarilor pentru lansarea foarte asteptata pentru React.

Actualizarea algoritmului de baza React a fost in curs de realizare – ofera o rescriere fundamentala pentru modul in care React gestioneaza reconcilierea. React va mentine acelasi API public si ar trebui sa permita actualizarea imediata pentru majoritatea proiectelor (presupunand ca ati remediat avertismentele privind deprecierea). Principalele obiective ale lansarii sunt urmatoarele:

  • Abilitatea de a imparti munca intreruptibila in bucati.
  • Abilitatea de a acorda prioritate, rebase si refolosirea lucrarilor in curs.

    Array

  • Abilitatea de a ceda inainte si inapoi intre parinti si copii pentru a sustine aspectul in React.
  • Abilitatea de a returna mai multe elemente din render ().
  • Portaluri
  • Suport mai bun pentru limitele erorilor.

Rescrieti algoritmul de baza

Caracteristica principala a rescrierii este redarea asincrona. ( Nota : aceasta nu este disponibila in versiunea 16.

Array

o, dar va fi o caracteristica de inscriere intr-o versiune 16.x viitoare). In plus, elimina vechile abstractii interne care nu au imbatranit bine si a impiedicat schimbarile interne.

O mare parte din acest lucru a fost derivat din prezentarea lui Lin Clark, asa ca va rugam sa verificati asta si sa ii aratati o dragoste pentru o imagine de ansamblu atat de incredibila.

Ce inseamna redarea asincronizata este ca lucrarea de redare poate fi impartita in bucati si distribuita pe mai multe cadre.

Array

Motorul de redare pentru browser este cu un singur fir, ceea ce inseamna ca aproape toate actiunile au loc sincron. React 16 gestioneaza firul principal si redarea utilizand API-urile native ale browserului, verificand intermitent pentru a vedea daca exista alte lucrari care trebuie efectuate. Un exemplu al firului principal al browserului din Firefox este pur si simplu:

while (! mExiting) {

NS_ProcessNextEvent (thread);

}

Anterior, React bloca intregul fir pe masura ce calcula arborele. Acest proces de reconciliere este acum denumit „reconciliere stiva”.

In timp ce se stie ca React este foarte rapid, blocarea firului principal ar putea face ca unele aplicatii sa nu se simta fluide. Versiunea 16 isi propune sa remedieze aceasta problema prin faptul ca nu necesita finalizarea procesului de redare odata ce a fost initiat. React calculeaza o parte a arborelui si apoi va intrerupe redarea pentru a verifica daca firul principal are vopsele sau actualizari care trebuie efectuate. Odata ce vopselele si actualizarile au fost finalizate, React incepe sa redea din nou. Acest proces se realizeaza prin introducerea unei noi structuri de date numita „fibra” care se mapeaza la o instanta React si gestioneaza activitatea pentru instanta, precum si cunoasterea relatiei sale cu alte fibre. O fibra este doar un obiect JavaScript.

Reconcilierea stivei – actualizarile trebuie finalizate in intregime inainte de a reveni la firul principal (credit Lin Clark)

Reconcilierea fibrelor – actualizarile vor fi grupate in bucati, iar React va gestiona firul principal (credit Lin Clark)

React 16 va acorda prioritate actualizarilor in functie de importanta. Acest lucru permite actualizarilor cu prioritate ridicata sa sara in fata liniei si sa fie procesate mai intai. Un exemplu in acest sens ar fi ceva de genul unei introduceri cheie. Aceasta este o prioritate ridicata, deoarece utilizatorul are nevoie de acel feedback imediat pentru a se simti fluid, spre deosebire de o actualizare cu prioritate redusa, cum ar fi un raspuns API care poate astepta inca 100-200 milisecunde.

Reactioneaza prioritatile (credit Lin Clark)

Prin divizarea actualizarilor UI in unitati de lucru mai mici, se obtine o experienta generala mai buna a utilizatorului. Intreruperea activitatii de reconciliere pentru a permite firului principal sa execute alte sarcini necesare ofera o interfata mai lina si o performanta perceputa mai bine.

Eroare de manipulare

Erorile din React au fost un pic de mizerie pentru a lucra, dar acest lucru se schimba in versiunea 16. Anterior, erorile din interiorul componentelor ar deteriora starea React si ar oferi erori criptice la randarile ulterioare.

lol ce?

React 16 include granitele de eroare nu numai ca va oferi mesaje de eroare mult mai clare, dar va impiedica intreruperea intregii aplicatii. Dupa ce au fost adaugate la aplicatia dvs., limitele erorilor prind erori si afiseaza cu gratie o interfata interioara fara ca intregul arbore al componentelor sa se blocheze. Limitele pot surprinde erori in timpul redarii, in metodele ciclului de viata si in constructorii intregului copac sub ele. Limitele de eroare sunt pur si simplu implementate prin intermediul noii metode de ciclu de viata componentDidCatch (eroare, informatii).

Aici, orice eroare care se intampla in <MyWidget /> sau copiii sai va fi capturata de componenta <ErrorBoundary>. Aceasta functionalitate se comporta ca un bloc {} catch in JavaScript. Daca granita de eroare primeste o stare de eroare, in calitate de dezvoltator, puteti defini ceea ce este afisat in interfata de utilizare. Retineti ca granita de eroare va prinde erori numai in arborele de sub ea, dar nu va recunoaste erorile in sine.

Inaintand, veti vedea erori robuste si actionabile ca aceasta:

omg that is nice (credit Facebook)

Returneaza mai multe elemente din randare

Acum puteti returna o matrice, dar nu uitati cheile!

render () {

return [

<li key = “A”> Primul element </li>,

<li key = “B”> Al doilea element </li>,

<li key = “C”> Al treilea element </li> ,

];

}

Portaluri

Redati elementele intr-un nou nod DOM. De exemplu, ar putea fi grozav sa aveti o componenta modala generala in care accesati continutul portalului.

render () {

// React * nu * creeaza un nou div. Ii transforma pe copii in „domNode”.

// „domNode” este orice nod DOM valid, indiferent de locatia sa in DOM.

returneaza ReactDOM.createPortal (

this.props.children,

domNode,

);

}

Redare asincronizata

Accentul lansarii initiale 16.0 este pe compatibilitatea pentru aplicatiile existente. Redarea asincronizata nu va fi o optiune initial, dar in versiunile 16.x ulterioare, va fi inclusa ca o optiune de inscriere.

Compatibilitatea browserului

React 16 depinde de Map si Set. Pentru a asigura compatibilitatea cu toate browserele, trebuie sa includeti un polyfill. Optiunile populare sunt core-js sau babel-polyfill.

In plus, va depinde si de requestAnimationFrame, inclusiv pentru teste. O simpla cale pentru scopuri de testare ar fi:

global.requestAnimationFrame = functie (callback) {

setTimeout (callback);

};

Ciclul de viata al componentelor

Intrucat React acorda prioritate redarii, nu vi se mai garanteaza componentWillUpdate si shouldComponentUpdate a diferitelor componente se va declansa intr-o ordine previzibila. Echipa React lucreaza pentru a oferi o cale de actualizare pentru aplicatiile care s-ar rupe de acest comportament.

Utilizare

In prezent, React 16 este in versiune beta, dar va fi lansat in curand. Puteti incepe sa utilizati versiunea 16 acum facand urmatoarele:

# fire

fire adauga react react react-dom

# npm

npm install –save react react-dom

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR