Le but et la signification de React Web sont très clairs: laissez le code natif React s'exécuter sur le Web et laissez un ensemble de code s'exécuter sur divers terminaux mobiles. Pour le front-end et les affaires, il s'agit d'une amélioration qualitative de l'efficacité du développement. Au début du projet, nous avons également consulté l'équipe React avec des questions similaires. Le camarade de classe de base de leur équipe @vjeux a également pensé que c'était une chose très cool et ce qu'ils voulaient faire à l'avenir. Peut-être que lorsque React Native pour Android, React Web peut être publié. (Yy)
Architecture technique
Il existe plusieurs solutions d'adaptation basées sur React Native:
1. Développez une norme de pont, et RN et RW implémentent chacun cet ensemble de normes de manière optimale.
Par exemple, sur la base de la disposition Flex, nous implémentons un ensemble cohérent de composants flexibles, <flex>, <lecl>, etc.
2. Complet complètement avec RN, RW implémente toutes les API que RN peut implémenter.
Dans la discussion, ce dernier a finalement été choisi.
En raison du concept de react web, laissez le code natif réagir l'exécution du côté Web, il détermine que RW n'est qu'un outil de construction et d'emballage, séparé de RN, et que l'implémentation de RW n'est pas très importante. Ensuite, la direction technique globale est très claire: implémenter un style, composant et API cohérent RN, et enfin le compiler dans une version Web via l'outil de construction.
Exemple
Jetons un coup d'œil au processus de création de React Web Project:
Étape 1: Installez React Web et effectuez une configuration connexe
Cette étape consiste principalement à installer des packages React-Web et des dépendances connexes et à configurer les scripts de packaging WebPack.
Afin de simplifier cette étape, nous avons développé l'outil de ligne de commande React-Web-Cli, qui ne nécessite que l'exécution de deux lignes de commande. Dans le même temps, l'outil de ligne de commande prend également en charge le démarrage du serveur de débogage, de l'emballage et d'autres fonctions, qui sera introduit plus tard.
Installer des outils CLI:
NPM Install React-Web-Cli -g
Installer et configurer React Web, etc .:
React-Web init <Current Project Directory>
Une fois l'exécution terminée, les bibliothèques liées à l'installation NPM seront créées dans votre répertoire de projet, et le fichier web / webpack.config.js sera automatiquement créé, avec une configuration écrite. Pour le moment, la structure du répertoire est:
.├── Readme.md├── Android / ├── index.android.js├── index.ios.js├─ ios / ├── package.json└fiques web / └fique
Étape 2: Ajoutez le fichier d'entrée et effectuez des configurations pertinentes
Chaque projet doit avoir un fichier d'entrée, qui est généralement utilisé pour introduire et appeler d'autres composants et initialiser le projet, tels que index.ios.js représente le fichier d'entrée du projet sur la plate-forme iOS. Afin de se conformer à la spécification de dénomination du fichier natif React, nous créons un index.web.js comme fichier d'entrée, et nous devons spécifier que le fichier est le fichier d'entrée dans WebPack. Ouvrez le fichier web / webpack.config.js et modifiez la variable de configuration:
var config = {paths: {src: path.join (root_path, '.'), index: path.join (root_path, 'index.web'),},};Ensuite, nous créons le fichier index.web.js. Ce fichier est en fait très similaire à index.ios.js, mais est légèrement différent. La principale différence est qu'iOS n'a besoin que d'apression.RegisterComponent («awes», () => awes); Pour permettre au code natif de Xcode de recevoir et de traiter votre code JS, tandis que le côté Web doit être inséré dans le nœud Dom avant qu'il ne puisse être utilisé. Par conséquent, nous devons ajouter le code suivant au bas de l'index.web.js:
APPREGERTS.REGISTERCOMPONENT ('Awes', () => Awes); if (plateforme.os == 'web') {var app = document.createElement ('div'); document.body.ApendChild (app); APPREGERS.RUNAPPLICATION ('AWES', {Roottag: App});}Ensuite, le composant de la plate-forme doit être introduit dans la section Top Exige. De cette façon, la partie de configuration a été traitée. Exécutez la commande React-Web Start pour démarrer le serveur de débogage!
Vous pouvez le modifier à volonté, c'est presque la même chose que l'expérience dans le simulateur natif React.
Étape 3: tester et emballer le code de version Web
Lorsque vous avez terminé de modifier et de développer et tester le côté Web, vous pouvez l'emballer et le publier. Les commandes emballées par l'outil React-Web-Cli sont:
bundle react-web
Après emballage, le fichier sera stocké dans le Web / Output / Directory. Vous pouvez ouvrir directement Index.html (si l'application a demandé des opérations, vous devez le vérifier à partir du serveur local), puis vous pouvez le publier après la vérification.
Que s'est-il passé pendant ce processus?
Les étudiants curieux peuvent avoir quelques questions lorsqu'ils voient cela. Que faisaient certaines commandes de l'outil de ligne de commande ci-dessus? Pourquoi React Web Package réagit-il le code natif dans une copie du code utilisée du côté Web? React Web est-il sûr et fiable? Quelles sont les choses à l'intérieur?
Ici, je présenterai brièvement les principes de mise en œuvre de React Web et ce que les étapes ont réellement fait.
React Web implémente réagir les composants natifs du côté Web
React sépare le code de l'environnement de la plate-forme, en ajoutant une couche, afin que les développeurs puissent effectuer un certain traitement au niveau de l'environnement de la plate-forme, afin que le même code puisse s'adapter à plus d'environnements de plate-forme, etc.
Par exemple, React-Canvas écrit du code en fonction de la syntaxe de React, fait un traitement au niveau de l'environnement de la plate-forme (exécute votre code de réact et le rend avec toile), puis atteint des objectifs spécifiques (améliorant les performances du côté mobile).
Dans React Native, il en va de même pour un morceau de code pour fonctionner sur iOS et Android en même temps. L'équipe native React a effectué un certain traitement sur l'application native de la plate-forme correspondante pour lui permettre d'analyser le code qui exécute la syntaxe React.
Il existe également des applications isomorphes. Le serveur utilise React + Node.js pour générer du HTML, et le client utilise React pour obtenir des interactions et des fonctions liées au client. La même chose est vraie.
À cette fin, la version React V0.14.x a commencé avec deux bibliothèques, React et React-Dom, qui ont en fait éliminé le traitement spécial de la plate-forme du navigateur et l'a transformé en bibliothèque React-Dom seul.
La chose particulière à propos de React Native est que l'implémentation de niveau le plus bas du composant est la mise en œuvre du natif, donc il ne prend pas en charge les balises telles que Span et Div. L'animation, etc., appelle également directement le natif pour le rendu d'interface. Par conséquent, le côté Web n'est pas pris en charge, mais la plupart des composants peuvent être simulés et mis en œuvre à l'aide de la technologie Web. L'animation peut être utilisée dans CSS3, les éléments de base peuvent être simulés avec la même balise HTML, les problèmes de mise en page et de compatibilité peuvent être gérés dans CSS, de sorte que le Web React n'a besoin que de réimplémenter les composants natifs React à l'aide de la technologie Web, et à l'aide de React cette couche, un morceau de code peut être mis en œuvre sur plusieurs plates-formes.
Pour donner un exemple très simple, le composant texte:
L'implémentation de React Native appelle une grande partie des implémentations de code sous-jacentes de React Native.
Pour le côté Web, utilisez simplement la balise <span> pour publier une ligne de texte, de sorte que l'implémentation de React Web crée directement une balise <Span>, et il est acceptable de lier certains événements ou quelque chose.
Vous pouvez utiliser les composants natifs React qui peuvent fonctionner dans la démo de l'explorateur d'interface utilisateur en toute confiance.
WebPack vous aide à changer de cible d'emballage
Après avoir fait un composant compatible avec le côté Web, n'aurions-nous pas besoin de remplacer tous les obligatoires («réactif-natif») dans les composants à emballer avec require («react-web»)? Sinon, comment puis-je utiliser mes composants Web pour l'emballer?
Le puissant WebPack est livré avec des éléments de configuration d'alias pour vous aider à résoudre ce problème:
Resolve: {alias: {'react-native': 'react-web', 'reactnativeart': 'react-art',}, extensions: ['', '.js', '.jsx'],},De cette façon, lors de l'emballage, tous les endroits où ils ont besoin («réactif-natif») sont remplacés par un package React-Web, et le module de React-Web.
De plus, une autre méthode d'introduction peut être implémentée avec le plug-in, veuillez voir ci-dessous.
Introduire des composants à travers la méthode de la hâte pour améliorer les performances
WebPack et autres outils d'emballage qui prennent en charge les spécifications CommonJS emballeront tous les composants de l'exigence dans le fichier ensemble. Pour React Native, la taille du code n'est pas pertinente, mais pour le Web mobile, il est un peu plus important. Surtout si votre projet n'a besoin que de composants de texte, mais c'est triste car il faut («react-web») dans l'emballage de tous les composants.
Sur la base du plugin WebPack, il existe un autre moyen d'introduire des composants pour résoudre ce problème, vous pouvez l'appeler la manière de la hâte. Cette méthode nécessite le chargement du plugin webpack haste-resolver-webpack-plagin. La configuration de WebPack par défaut a été chargée pour vous. Vous pouvez l'utiliser directement dans le composant comme suit:
var text = require ('reactText');Au lieu de ce qui était avant:
var {text} = require ('react-native');De cette façon, lorsque WebPack est emballé, le premier ne fera que le contenu de ce composant, ce qui peut réduire la taille et améliorer les performances. Comment cela est-il réalisé?
Lorsque le webpack du plug-in est chargé, tous les composants seront analysés en premier et les informations de @providesmodule dans l'en-tête du composant (comme les informations du composant texte), puis lorsque le nom du composant est requis dans d'autres fichiers, le fichier sera automatiquement situé pour l'emballage. En même temps, vous pouvez également faire la distinction entre les plates-formes. Même si c'est le même nom, la plate-forme sera différenciée lors de l'emballage des fichiers correspondants (les fichiers sont déterminés en fonction des règles de dénomination de l'index.xxx.js).