Quelle est la différence entre réagir et réagir natif

La différence entre React et React Native est la suivante : 1. La plate-forme sur laquelle le framework fonctionne est différente ; 2. Le principe de fonctionnement est différent 3. Le cycle de rendu est différent 4. Tous les éléments de React Native ; sera remplacé par les composants React spécifiés par la plateforme ;5. Les API des plateformes hôtes sont différentes.

L'environnement de cet article : Windows10, version React16, ordinateur Dell G3.

(Partage de vidéos d'apprentissage : tutoriel vidéo React)

Les différences sont les suivantes :

1. Les plateformes sur lesquelles le framework fonctionne sont différentes.

RN Il est dérivé de React. Les deux frameworks utilisent la syntaxe de développement JSX, mais RN est un framework JS utilisé pour développer des applications mobiles iOS et Andriod véritablement rendues de manière native, tandis que React utilise le navigateur comme plate-forme de rendu.

2. Différences dans les principes de fonctionnement

Le DOM virtuel se situe entre la vue décrite par le développeur et la vue réellement rendue sur la page. Si vous souhaitez restituer une interface utilisateur interactive sur un navigateur, les développeurs doivent exploiter le modèle objet de document du navigateur. L'émergence de Virtual DOM consiste à économiser les performances consommées par cette partie de l'opération.

Mais l’énorme potentiel du Virtual DOM réside dans cette couche d’abstraction, qui peut apporter de nombreuses possibilités.

Le principe de fonctionnement de React Native est d'appeler l'API Objective-C pour restituer les composants iOS et l'API Java pour restituer les composants Android au lieu du rendu vers DOM. Le pontage permet à React d'appeler les composants d'interface utilisateur ouverts par la plate-forme hôte, et le composant React renvoie le code de balisage décrivant l'interface via la méthode de rendu. S'il s'agit d'une plate-forme Web, React analysera éventuellement le code de balisage dans le DOM du navigateur ; dans React Native, le code de balisage sera analysé en composants spécifiques à la plate-forme, par exemple, 548e7793df275d156d270cdda504ba19 plate-forme.

3. Cycle de rendu

Le cycle de rendu de React démarre une fois le composant React monté sur le DOM, puis React entre dans le cycle de rendu et restitue le composant selon les besoins. Dans la phase de rendu, React restitue les balises HTML renvoyées par le développeur en retour directement sur la page à la demande.

Le cycle de vie de React Native est fondamentalement le même que celui de React. En termes de rendu, étant donné que React Native repose sur le pontage et ne s'exécute pas sur le thread principal de l'interface utilisateur, il peut exécuter ces appels asynchrones sans affecter l'expérience utilisateur. .

4. Créer des composants

Lors de l'écriture de React pour l'environnement Web, la vue doit finalement être rendue en éléments HTML ordinaires dans React Native, tous les éléments seront des composants React spécifiés par la plate-forme. , par exemple, dans iOS, le composant 548e7793df275d156d270cdda504ba19 est rendu sous la forme UIView, mais sur la plate-forme Android, il est rendu sous la forme View.

Les éléments d'interface utilisateur sont tous des composants React, pas des éléments HTML de base comme dc6dce4a544fdca2df29d5ac0ea9906b, donc lorsque vous utilisez chaque composant, vous devez l'importer explicitement, par exemple :

import { DatePickerIOS } from 'react-native';

5.

Sur le Web, l'utilisation de styles CSS pour ajouter des styles aux composants React est déjà une partie inaccessible du processus de développement. React n'affecte généralement pas la façon dont nous écrivons CSS, et facilite la création dynamique de styles (via l'état et les accessoires), mais à part cela, React ne se soucie pas de la façon dont nous gérons les styles.

Il existe un grand nombre de façons de gérer la mise en page et les styles sur les plateformes non Web. Lorsque nous utilisons React Native, il suffit d'utiliser une méthode standard pour gérer les styles. inclut une réduction L'implémentation du sous-ensemble CSS, qui est principalement présenté via flexbox, est aussi simple que possible au lieu d'implémenter toutes les règles CSS. Contrairement à la plateforme Web, où le niveau de prise en charge CSS varie d'un navigateur à l'autre, React Native atteint des règles de style cohérentes.

6. API de la plateforme hôte

La plus grande différence entre React utilisant l'environnement Web et React Native réside dans l'API de la plateforme hôte.

Sur le Web, nous devons souvent faire face à des problèmes causés par une adoption incohérente et fragmentée des normes, et la plupart des navigateurs ne prennent en charge qu'un sous-ensemble de fonctionnalités de base. Cependant, dans React Native, les API spécifiques à la plate-forme jouent un rôle important en offrant une excellente expérience utilisateur native. Bien entendu, il y a bien d’autres aspects à considérer. L'API couvre de nombreuses fonctions, du stockage de données aux géoservices en passant par le contrôle des périphériques matériels tels que les caméras. Les API sur les plateformes non conventionnelles seront plus intéressantes. Par exemple, à quoi ressemblera l’API entre React Native et les casques de réalité virtuelle ?

Par défaut, les versions iOS et Android de React Native prennent en charge de nombreuses fonctionnalités couramment utilisées et peuvent même prendre en charge n'importe quelle API native asynchrone. React Native rend l'utilisation de l'API de la plate-forme hôte plus facile et plus intuitive, où vous pouvez expérimenter librement. Dans le même temps, veillez à réfléchir à la manière d'adapter l'expérience de la plate-forme cible et à concevoir le processus d'interaction dans votre esprit. Inutile de préciser que le pont de React Native ne peut pas exposer toutes les API de la plateforme hôte.

Si vous devez utiliser une fonctionnalité non prise en charge, vous pouvez l'ajouter vous-même à React Native. De plus, il serait préférable que quelqu'un d'autre l'ait déjà intégré, vous devriez donc vérifier la mise en œuvre dans la communauté en temps opportun. Il convient de noter que l’utilisation des API de la plateforme facilitera également la réutilisation du code. Dans le même temps, les composants React qui implémentent des fonctionnalités spécifiques à la plate-forme sont également spécifiques à la plate-forme.

Isoler et encapsuler ces composants apportera une plus grande flexibilité à votre application. Bien sûr, cela fonctionne également pour vous qui développez des applications Web. Si vous souhaitez partager du code entre React et React Native, n'oubliez pas que les API comme DOM n'existent pas dans React Native.

Recommandations associées : Tutoriel js

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!