React Native dispose-t-il d'un 'DOM virtuel'?
De ReactJS wiki page sur Virtual DOM:
React crée un cache de structure de données en mémoire, calcule le différences résultantes, puis met à jour le DOM .__ affiché par le navigateur. efficacement. Cela permet au programmeur d'écrire du code comme si le la page entière est rendue à chaque modification alors que les bibliothèques React uniquement rendre les sous-composants qui changent réellement.
En d'autres termes, Virtual DOM nous permet d'améliorer les performances en évitant les manipulations directes avec DOM.
Mais qu'en est-il React Native ?
Nous savons qu'en théorie, sur d'autres plateformes, il existe des vues natives et des composants d'interface utilisateur. Il n'y a rien à propos de DOM lui-même. Alors pouvons-nous dire que React Native a "Virtual DOM" ou que nous parlons d'autre chose?
Par exemple, il existe une section section in Weex specs qui décrit les méthodes permettant de travailler directement avec l’arborescence DOM. Et je suppose que potentiellement, nous pouvons penser que React Native devrait avoir une sorte d'arborescence DOM ainsi qu'une couche d'abstraction "Virtual DOM" qui est l'idée principale de React lui-même.
Donc ma question est:
React Native a-t-il une sorte de "DOM virtuel" (ou sa représentation) et si oui, comment ce "DOM virtuel" est-il porté sur diverses plates-formes?
METTRE À JOUR:
Le but de cette question est de faire la lumière sur la façon dont React Native gère le rendu des composants natifs de l'interface utilisateur. Existe-t-il une approche spécifique et, dans l'affirmative, comment s'appelle-t-il officiellement?
UPDATE 2:
Cet article décrit la nouvelle architecture React appelée Fibre qui ressemble à la réponse à cette question.
En bref
Eh bien .. en substance, oui, tout comme le DOM virtuel de Reactjs, React-Native crée une hiérarchie d’arborescence pour définir la mise en page initiale et crée un diff de cette arborescence à chaque changement de disposition pour optimiser les rendus. Sauf que React-Native gère les mises à jour de l'interface utilisateur au travers de plusieurs couches d'architecture qui traduisent finalement le rendu des vues tout en essayant d'optimiser les modifications au minimum afin de fournir le rendu le plus rapide possible.
Une explication plus détaillée
Afin de comprendre comment réagit native crée des vues en arrière-plan, vous devez comprendre les principes fondamentaux, et pour cela, je préfère commencer par la base.
1.Le moteur de mise en page de yoga
Yoga est un moteur de disposition multiplate-forme écrit en C qui implémente Flexbox via des liaisons aux vues natives (Vues Android Android/Objective-C iOS UIKit).
Tous les calculs de mise en page des différentes vues, textes et images dans React-Native se font par le biais du yoga. Il s’agit en fait de la dernière étape avant que nos vues ne soient affichées à l’écran.
2. Nœuds d'arbre/ombre
Lorsque react-native envoie les commandes pour restituer la mise en page, un groupe de noeuds fantômes sont assemblés pour créer un arbre fantôme représentant le côté natif mutable de la structure (c'est-à-dire: écrit dans le langage correspondant, Java pour Android et Objective-C pour iOS) qui est ensuite traduit en vues réelles à l’écran (en utilisant le yoga).
3. ViewManager
ViewManger est une interface qui sait traduire les types de vues envoyés depuis JavaScript dans leurs composants d'interface utilisateur natifs . ViewManager sait comment créer un nœud d'ombre, un nœud de vue natif et mettre à jour les vues . Dans l’infrastructure React-Native, de nombreux outils ViewManager permettent d’utiliser les composants natifs . Si, par exemple, vous souhaitez un jour créer une nouvelle vue personnalisée et l’ajouter à rea-native, cette vue doivent implémenter l'interface ViewManager
4. UIManager
UIManager est la dernière pièce du puzzle, ou bien le premier . Les commandes déclaratives JavaScript JSX sont envoyées au natif en tant que commandes Imperative qui indiquent à React-Native comment organiser les vues, étape par étape, de manière itérative . Ainsi, lors du premier rendu, UIManager enverra la commande pour créer les vues nécessaires et continuera d'envoyer les diffs de mise à jour à mesure que l'interface utilisateur de l'application change au fil du temps.
Donc, React-Native utilise toujours fondamentalement la capacité de Reactjs de calculer la différence entre la représentation de rendu précédente et la représentation de rendu actuelle et envoie les événements à UIManager en conséquence.
Pour en savoir un peu plus sur le processus, je vous recommande le suivant: présentation de Emil Sjölander de la conférence React-Native EU 2017 à Wroclaw.
Je ne sais pas si c'est la réponse à votre question, mais je l'ai trouvé dans les documents officiels de React:
React construit et gère une représentation interne de l'interface utilisateur rendue. Il inclut les éléments React que vous retournez de vos composants. Cette représentation permet à React d'éviter la création de nœuds DOM et l'accès excessif aux nœuds existants, car cela peut être plus lent que les opérations sur les objets JavaScript. Parfois, on parle de "DOM virtuel", mais cela fonctionne de la même manière avec React Native.
Donc, je dirais que oui, il gère une représentation interne très similaire à celle utilisée dans React.js. Ensuite, je suppose qu’il utilise les API Javascript pour rendre les vues natives exactement comme le suggère l’article que vous avez lu }.
EDITCet article fourni par Sebas dans un commentaire est également intéressant car un membre de l'équipe de React (et de React Native) dit que:
React Native montre que ReactJS a toujours été plus axé sur le "zéro DOM" que sur le "DOM virtuel" (contrairement à la croyance populaire).
Il semble que le soi-disant «DOM virtuel React» soit beaucoup plus proche d'une structure/représentation interne des éléments pouvant être mappés vers diverses technologies que vers un DOM HTML.
Cet article décrit la nouvelle architecture React appelée Fibre . Cela semble être la bonne réponse à propos de ce qui se passe dans React Native ou du moins de ce que React Native tentera de réaliser dans un proche avenir.
Le DOM n’est que l’un des environnements de rendu que React peut rendre, les autres cibles principales étant les vues natives iOS et Android via React Originaire de. (C’est la raison pour laquelle "Virtual DOM" est un peu impropre.)
La raison pour laquelle il peut supporter autant de cibles est parce que React est conçu de sorte que la réconciliation et le rendu soient des phases séparées. Le Le réconciliateur fait le travail de calcul des parties d’un arbre modifié; le moteur de rendu utilise ensuite ces informations pour mettre à jour réellement l'application rendue.
Cette séparation signifie que React DOM et React Native peuvent utiliser leur propres rendus tout en partageant le même réconciliateur, fourni par React coeur.
La fibre réimplémente le réconciliateur.
Voici une simplification excessive: ReactJS génère le DOM qui peut être restitué aux navigateurs. Comme vous le savez déjà, le DOM virtuel aide ReactJS à garder une trace efficace du delta de ce qui a changé. Pour React Native pour iOS, il génère finalement du code UIKit. Même chose avec React Native pour Android, mais au lieu de sortir DOM ou UI Kit, la sortie est créée à l'aide de SDK Android. Le DOM virtuel n’est donc qu’une étape intermédiaire. Cela peut être considéré comme une combinaison de la structure de données interne pour contenir les données décrivant où restituer le bouton et la zone de texte, ce qui se passe lorsque vous appuyez sur le bouton, etc., et un algorithme efficace pour suivre ce qui a changé. Le même code peut être utilisé pour toutes les plateformes. Seule la dernière étape est différente. Selon la plate-forme, le code qui génère le code DOM, le code UIKit ou le nom de la librairie de l'interface utilisateur Android est généré.