El propósito y la importancia de React Web son muy claros: deje que React Native Code se ejecute en la web y deje que un conjunto de código se ejecute en varios terminales móviles. Para el front-end y el negocio, esta es una mejora cualitativa en la eficiencia del desarrollo. En las primeras etapas del proyecto, también consultamos al equipo React con preguntas similares. El compañero de clase central de su equipo @vjeux también pensó que esto era algo genial y lo que querían hacer en el futuro. Tal vez cuando React nativo para Android, React Web puede ser lanzado. (YY)
Arquitectura técnica
Hay varias soluciones de adaptación basadas en React Native:
1. Desarrolle un estándar de puente, y RN y RW implementan este conjunto de estándares de la manera óptima.
Por ejemplo, según el diseño flexible, implementamos un conjunto consistente de componentes flexibles, <flex>, <cell>, etc.
2. Alinee completamente con RN, RW implementa todas las API que RN puede implementar.
En la discusión, este último fue finalmente elegido.
Debido al concepto de REACT Web, deje que React Native Code se ejecute en el lado web, determina que RW es solo una herramienta de construcción y empaque, separada de RN, y la implementación de RW no tiene mucha importancia. Luego, la dirección técnica general es muy clara: implementar un estilo, componente y API consistente RN, y finalmente compilarla en una versión web a través de la herramienta de construcción.
Ejemplo
Echemos un vistazo al proceso de creación del proyecto web React:
Paso 1: Instale React Web y realice una configuración relacionada
Este paso es principalmente para instalar paquetes React-Web y dependencias relacionadas, y configurar los scripts de empaque de Webpack.
Para simplificar este paso, hemos desarrollado la herramienta de comando react-Web-cli, que solo requiere la ejecución de dos líneas de comando. Al mismo tiempo, la herramienta de línea de comandos también admite iniciar el servidor de depuración, el embalaje y otras funciones, que se introducirán más adelante.
Instalar herramientas CLI:
NPM Instalar React-Web-Cli -G
Instalar y configurar React Web, etc.:
React-Web init <Directorio de proyecto actual>
Una vez completada la ejecución, las bibliotecas relacionadas con la instalación de NPM se crearán en el directorio de su proyecto, y el archivo web/webpack.config.js se creará automáticamente, con una configuración escrita en él. En este momento, la estructura del directorio es:
.├── ReadMe.Md├── Android/├── índice.android.js├── index.ios.js├── iOS/├── paquete.json└── web/└── Webpack.config.js
Paso 2: Agregue el archivo de entrada y haga configuraciones relevantes
Cada proyecto debe tener un archivo de entrada, que generalmente se usa para introducir y llamar a otros componentes e inicializar el proyecto, como index.ios.js representa el archivo de entrada del proyecto en la plataforma iOS. Para cumplir con la especificación de nombres de archivos nativos de React, creamos un index.web.js como el archivo de entrada, y debemos especificar que el archivo es el archivo de entrada en Webpack. Abra el archivo web/webpack.config.js y modifique la variable de configuración:
var config = {ruta: {src: path.join (root_path, '.'), index: path.Join (root_path, 'index.web'),},};Luego creamos el archivo index.web.js. Este archivo es realmente muy similar a index.ios.js, pero es ligeramente diferente. La principal diferencia es que iOS solo necesita aprego.registerComponent ('awes', () => awes); Para permitir que el código nativo de Xcode reciba y procese su código JS, mientras que el lado web debe insertarse en el nodo DOM antes de que pueda usarse. Por lo tanto, necesitamos agregar el siguiente código en la parte inferior de index.web.js:
Appregistry.registerComponent ('awes', () => awes); if (plataforma.os == 'web') {var app = document.createElement ('div'); document.body.appendChild (aplicación); Appregistry.runapplication ('awes', {roottag: app});}Luego, el componente de la plataforma debe introducirse en la sección Requerir superior. De esta manera, la parte de configuración ha sido procesada. ¡Ejecute el comando React-Web Start para iniciar el servidor de depuración!
Puede modificarlo a voluntad, es casi lo mismo que la experiencia en el simulador nativo React.
Paso 3: prueba y empaqueta el código de versión web
Cuando haya terminado de modificar, desarrollar y probar el lado web, puede empaquetarlo y publicarlo. Los comandos empaquetados por la herramienta React-Web-CLI son:
React-Web Bundle
Después del empaque, el archivo se almacenará en el directorio web/ salida/. Puede abrir directamente Index.html (si la aplicación ha solicitado operaciones, debe verificarlo desde el servidor local), y luego puede publicarlo después de verificar.
¿Qué pasó durante este proceso?
Los estudiantes curiosos pueden tener algunas preguntas cuando ven esto. ¿Qué hicieron algunos comandos de la herramienta de línea de comandos de arriba? ¿Por qué React Web Package React Code Native Code en una copia del código utilizado en el lado web? ¿React Web es segura y confiable? ¿Cuáles son las cosas dentro?
Aquí presentaré brevemente los principios de implementación de React Web y lo que realmente hicieron los pasos.
React Web Implementos React Componentes nativos en el lado web
React separa el código del entorno de la plataforma, agregando una capa, para que los desarrolladores puedan procesar algo de procesamiento en el nivel de entorno de la plataforma, para que el mismo código pueda adaptarse a más entornos de plataforma, etc.
Por ejemplo, React-Canvas escribe código de acuerdo con la sintaxis de React, se procesa en el nivel de entorno de la plataforma (ejecuta su código React y lo convierte en lienzo), y luego logra objetivos específicos (mejora el rendimiento en el lado móvil).
En React Native, lo mismo es cierto para que un código se ejecute en iOS y Android al mismo tiempo. El equipo nativo de React ha realizado algún procesamiento en la aplicación nativa de la plataforma correspondiente para permitirle analizar el código que ejecuta la sintaxis React.
También hay aplicaciones isomórficas. El servidor usa React + Node.js para generar HTML, y el cliente usa React para obtener interacciones y funciones relacionadas con el cliente. Lo mismo es cierto.
Con este fin, la versión React V0.14.x comenzó con dos bibliotecas, React y React-Dom, que en realidad eliminó el tratamiento especial de la plataforma del navegador y lo convirtió en la biblioteca React-Dom solo.
Lo especial de React Native es que la implementación de nivel más bajo del componente es la implementación de Native, por lo que no admite etiquetas como SPAN y DIV. Animación, etc., también llame directamente a Native for Interface Rendering. Por lo tanto, el lado web no es compatible, pero la mayoría de los componentes pueden simularse e implementarse utilizando la tecnología web. La animación se puede usar en CSS3, los elementos básicos se pueden simular con la misma etiqueta HTML, diseño y problemas de compatibilidad se pueden manejar en CSS, por lo que la web React solo necesita volver a implementar los componentes reactos nativos utilizando tecnología web, y con la ayuda de React esta capa, se puede implementar una pieza de código en múltiples plataformas.
Para dar un ejemplo muy simple, el componente de texto:
La implementación de React Native llama a muchas de las implementaciones de código subyacente de React Native.
Para el lado web, solo use la etiqueta <span> para generar una línea de texto, por lo que la implementación de la web React crea directamente una etiqueta <span>, y está bien vincular algunos eventos o algo así.
Puede usar componentes nativos React que pueden ejecutarse en la demostración de UI Explorer con confianza.
Webpack lo ayuda a cambiar de objetivos de embalaje
Habiendo hecho un componente compatible con el lado web, ¿no necesitaríamos reemplazar todos los requeridos ('React-Nativos') en los componentes que se empaquetan con requerir ('React-Web')? De lo contrario, ¿cómo puedo usar mis componentes web para empaquetarlo?
El poderoso webpack viene con elementos de configuración de alias para ayudarlo a resolver este problema:
resolve: {alias: {'react-native': 'react-web', 'reactnativeart': 'react-art',}, extensiones: ['', '.js', '.jsx'],},,De esta manera, cuando se empaqueta, todos los lugares donde requieren ('reaccion-nativo') se reemplazan con el paquete React-Web, y el módulo de react-Web.
Además, se puede implementar otro método de introducción con el complemento, consulte a continuación.
Introducir componentes a través del método de prisa para mejorar el rendimiento
Webpack y otras herramientas de embalaje que admiten las especificaciones de CommonJS empaquetarán todos los componentes de Requerir en el archivo juntos. Para React Native, el tamaño del código es irrelevante, pero para la web móvil, es un poco más importante. Especialmente si su proyecto solo necesita componentes de texto, pero es triste porque requiere ('react-web') da como resultado empacar todos los componentes.
Según el complemento Webpack, hay otra forma de introducir componentes para resolver este problema, puede llamarlo de la forma de prisa. Este método requiere cargar el complemento Webpack Haste-resolver-Webpack-Plugin. La configuración de Webpack predeterminada se ha cargado para usted. Puede usarlo directamente en el componente de la siguiente manera:
var text = request ('reactText');En lugar de lo que antes:
var {text} = require ('react-native');De esta manera, cuando Webpack está empaquetado, el primero solo empaquetará el contenido de ese componente, lo que puede reducir el tamaño y mejorar el rendimiento. ¿Cómo se logra esto?
Cuando se carga el paquete web del complemento, todos los componentes se escanearán primero y la información de @ProvidesModule en el encabezado del componente (como la información del componente de texto), y luego, cuando el nombre del componente se requiere en otros archivos, el archivo se ubicará automáticamente para el embalaje. Al mismo tiempo, también puede distinguir entre plataformas. Incluso si se trata del mismo nombre, la plataforma se diferenciará al empaquetar los archivos correspondientes (los archivos se determinan de acuerdo con las reglas de nombres de index.xxx.js).