Réagissez à la nouvelle architecture native

React Native a annoncé la sortie de la version 0.76. Avec cette mise à jour, la nouvelle architecture sera désormais activée par défaut. Avant la version 0.76, le seul moyen d'activer la nouvelle architecture était de vous inscrire.

Ce blog se concentrera sur les nouveautés de la nouvelle architecture.

La nouvelle architecture React Native fait la une des journaux depuis plus d'un an, et pour toutes les bonnes raisons. Cette nouvelle architecture, également connue sous le nom de « Bridgeless ». Pourquoi s'appelle-t-il sans pont ? Nous explorerons cela sur le blog."

Avant d'explorer la nouvelle architecture, récapitulons rapidement la précédente.

? Récapitulatif de l'architecture ancienne

a. Il existe deux pays : JavaScript et Native.

b. Il y a 3 fils de discussion :

• JavaScript Thread (JavaScript) : Responsable du code du bundle JavaScript.
• Main, UI Native Thread : Responsable des modules natifs.
• Thème d'ombre ou d'arrière-plan (Yoga) : Responsable de la mise en page.

c. La seule façon pour JavaScript et le code natif de communiquer entre eux est via le pont.

d. Tout composant natif, tel que Button ou Alert, est sérialisé en JSON dans la couche JavaScript et envoyé via le pont vers le thread natif. Dans le thread natif, ce JSON est ensuite converti en composant natif (iOS ou Android).

e. Dans le thread natif, lorsqu'un événement se produit sur un composant natif, il envoie l'événement au format JSON au thread JavaScript via le pont. Cette communication est asynchrone, permettant au pont de faciliter l'interaction entre JavaScript et les composants natifs.

? Problèmes avec l'ancienne architecture

La communication entre les couches JavaScript et natives repose sur le pont, ce qui constitue la principale limitation de l'ancienne architecture.

1. Problèmes de performances

2. Cadres saccadés ou vides

3. Duplication des nœuds

✨ Objectif de nouvelle architecture

La nouvelle architecture se concentre sur la résolution des défis de la précédente. Ses objectifs sont de :

1. Démarrage rapide ?

2. Rendu simultané ?️

3. Applications réactives ?‍?

4. Support sur plusieurs plateformes ?

5. Moins de crashs ?

6. Une meilleure gestion de la mémoire ?

7. Exécution synchrone ?

? Nouvelle architecture

La nouvelle architecture est une réécriture en C , qui a débloqué deux améliorations majeures :

A. Communication directe entre JavaScript et les couches natives sans pont. C'est pourquoi la nouvelle architecture est communément appelée « sans pont ».

B. Prise en charge de plusieurs plateformes (tant que les plateformes utilisent React Native)

---

? Composants de la nouvelle architecture :

1. Interface JavaScript (JSI)

JSI est une interface JavaScript, c'est la couche écrite en C . N'importe quel moteur JS peut être utilisé avec cela, ce qui permet la prise en charge multiplateforme - non seulement sur IOS, Android, mais également sur les téléviseurs intelligents, les montres intelligentes, etc.

JSI permet au JavaScript de contenir une référence au module natif. Ceux-ci permettent au JavaScript de communiquer directement avec les modules natifs, ainsi qu'à la communication synchrone entre JavaScript et le thread natif

PS : votre code natif de réaction est transmis via Metro et va au JSI.

2. Nouveaux modules natifs

Les nouveaux modules natifs sont les nouveaux modules natifs améliorés. Ceci est écrit en C et permet l'accès synchrone des API JS/TS à Native. Cela signifie que il y aura une communication directe entre le thread natif et JavaScript sans avoir besoin de pont. C permet également d'écrire vos propres modules natifs pour le partage multiplateforme.

De nouveaux modules natifs permettent de gérer les événements, de lire la mise en page, de planifier des mises à jour asynchrones et synchronisées.

Comme nous l'avons appris plus tôt, JSI conserve la référence des objets dans les TurboModules, cela permettra au code JavaScript de charger chaque module uniquement lorsque cela est requis (chargement dynamique des modules). Cela améliore le temps de démarrage de l'application par rapport à l'ancienne architecture.

3. Codegen

Codegen est un outil pour créer des contrats fortement typés. Ces contrats sont utiles aux développeurs en leur faisant gagner du temps et en facilitant la communication entre les langages de programmation croisés.

Dans React Native, JavaScript et Typescript ne sont pas des langages fortement typés mais C est fortement typé. Pour établir la communication entre JavaScript et C , codegen génère des interfaces (types). Cela s'est produit au moment de la construction pour une exécution rapide au moment de l'exécution.

Grâce au Codegen JSI (JavaScript Interface), communiquez directement avec les modules Turbo sans aucun pont.

4. Nouveau moteur de rendu

Le nouveau moteur de rendu est connu sous le nom de Fabric. Ceci est également écrit en C .
Vous vous souvenez que nous avons 3 threads dans React Native ? - Fil de discussion JavaScript, principal/interface utilisateur natif et ombre/arrière-plan. Dans l'ancienne architecture, le problème était que notre thread principal était bloqué, ce qui conduisait à :

1. problèmes de performances

2. images vides (60FPS manquantes)

3. de plus, l'ancienne architecture doit conserver la 2e copie du nœud et du DOM. Cela conduit au problème de mémoire

4. Il n'y avait aucun moyen d'interrompre les tâches de faible priorité pour donner la priorité aux mises à jour urgentes.

Dans le Tissu, ces problèmes ont été réglés. Avec le nouveau moteur de rendu, nous pouvons désormais utiliser la transition pour interrompre les tâches de faible priorité en cas d'urgence. Cela rendra l'application réactive et le thread natif principal/interface utilisateur ne sera pas débloqué. Les événements seront exécutés de manière asynchrone. Avec le nouveau système de rendu, il y aura une arborescence immuable de la hiérarchie des vues.

Immuable signifie qu'il ne sera pas modifiable. Avantages de l'immuable :

1. Cela permet un traitement thread-safe des mises à jour.

2. Cela signifie également qu'il y aura plusieurs arbres en cours, chacun représentant une version différente de l'interface utilisateur.

3. Comme il existe plusieurs arborescences dans différentes versions de l'interface utilisateur, *les mises à jour peuvent être rendues en arrière-plan sans bloquer l'interface utilisateur *(comme lors des transitions) ou sur le fil principal (en réponse à la saisie de l'utilisateur)

4. Le nouveau moteur de rendu peut également lire les informations de mise en page de manière synchrone et sur différents threads. Cela permet le calcul en arrière-plan pour les mises à jour de faible priorité et les lectures synchrones si nécessaire.

---

? Architecture de bout en bout

? Résumé

1. La nouvelle architecture est disponible par défaut à partir de la 0.76

2. Une nouvelle architecture a été introduite : JavaScript Interface (JSI), nouveaux modules natifs (Turbo Modules), codegen, nouveau moteur de rendu système (tissu)

3. JSI est une interface JavaScript elle est basée sur C et rend possible la communication directe des modules JavaScript et Natifs sans avoir besoin de Bridge

Les

4. Les nouveaux modules natifs sont des modules natifs actuels améliorés. Écrit en C et permet de nombreux avantages : communication synchrone vers et depuis JavaScript et native sans pont, chargement paresseux.

5. Codegen génère des interfaces de type pour JavaScript et C pour communiquer entre eux.

6. Nouveau moteur de rendu (Fabric) est un nouveau système de rendu écrit en C . Cela permet d'obtenir de meilleures performances en activant plusieurs threads et en interrompant les tâches de faible priorité.

7. Nouvelle boucle d'événements pour rendre le natif de réaction plus proche du DOM

8. Bonne lecture du numéro GitHub

Bon apprentissage !!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!