Cómo evaluar React Native
En correspondencia con el desarrollo front-end, la estructura de todo el sistema es la siguiente:
JSX vs HTML
Diseño CSS vs css
ECMAScript 6 vs ECMAScript 5
React Native View vs DOM
Nunca he actualizado la aplicación desde que la compilé e instalé por primera vez, solo actualicé las que están en el código js de la nube. y luego recargar, toda la interfaz cambiará.
La mayor parte del código de diseño es JSX y todos los componentes locales están etiquetados, lo que reduce el costo de aprendizaje de los programadores front-end y reduce en gran medida la cantidad de código. Si no lo cree, eche un vistazo al código compilado JSX.
Reutilizar el sistema React también reduce ciertos costos de aprendizaje y desarrollo. Más importante aún, los mecanismos de capas y diferencias se utilizan dentro de React. Lo que la capa js pasa a la capa nativa es el json que se ha diferenciado, y luego Native asigna los datos a la vista de diseño real.
css-layout también está diseñado para permitir que la interfaz continúe escribiendo diseños de una manera familiar similar a CSS y los convierta en diseños restringidos a través de esta herramienta.
Sistema
El sistema solo tiene una llamada unidireccional a js-objc, es decir, asigna los métodos de los componentes nativos de la interfaz de usuario a js a través de javascritcore o webview (versiones inferiores de iOS) Y todo el proceso de llamada es asincrónico. Este diseño es para permitir que React nativo permita que js se ejecute en el escritorio. Este diseño permite que React nativo permita que js se ejecute en el navegador Chrome de escritorio, conectando el código nativo
con el navegador Chrome de escritorio a través de websocket, lo que facilita enormemente la depuración. Hay un artículo muy detallado en el blog de Bang que explica el mecanismo, por lo que no entraré en detalles: ¿Explicación de los mecanismos de comunicación nativos de React? Pero este diseño también trae algunos problemas, que se discutirán más adelante.
La operación táctil también se abstrae en un conjunto de componentes (TouchableXXX), que es una abstracción en la que no pensé en trabajos similares anteriores. FACEBOOK también enumera las razones por las que Native "se siente" diferente a la web: respuesta táctil en tiempo real y funcionalidad de cancelación. React Native tiene un mecanismo bien diseñado para controlar todo el proceso de hacer clic y hacer clic, al igual que el código nativo.
Depuración
¡Muy fácil! Después de modificar el js y compilarlo en un paquete a través del nodejs
watcher incorporado, puede presionar cmd r en el simulador para ver el efecto. Al presionar la tecla cmd d, puede abrir una ventana del navegador Chrome y todos los js se transferirán a
chrome, por lo que los puntos de interrupción, los pasos únicos y los clics en la pila de llamadas no importarán.
Lo anterior es tanto una característica como un beneficio, mientras que lo siguiente es un inconveniente, o debería decir, "todavía un problema heredado": "En mi opinión, supera a la solución Hybird.
El sistema
todavía (tiene que) depender de componentes y métodos expuestos por componentes nativos.
Para dar dos ejemplos, el componente ScrollView de nivel nativo tiene una gran cantidad de eventos
scrollViewWillBeginDragging,
scrollViewWillEndDragging, scrollViewDidEndDragging,
scrollViewWillEndDragging, scrollViewDidEndDragging, etc. Ninguno de estos eventos está expuesto en la versión actual, por lo que básicamente
no se puede vincular componentes. Además, hay muchos componentes en esta versión que sólo están disponibles para iOS
: ActivityIndicatorIOS, DatePickerIOS, NavigatorIOS, PickerIOS,
SliderIOS, SwitchIOS, TabBarIOS, AlertIOS, AppStateIOS, LinkingIOS ,
p>
PushNotificationIOS, StatusBarIOS, VibrationIOS y por el contrario el resto son componentes básicos con un altísimo nivel de abstracción.
Esto
significa que los usuarios tienen que escribir dos conjuntos de código para diferentes plataformas, y toda la funcionalidad sigue dependiendo en gran medida de las interfaces expuestas por los desarrolladores nativos de React.
Dado que la capa más externa es
React, el costo de aprendizaje inicial es alto; a diferencia de la solución Hybird habitual, solo necesita aprender algunos JS más
API para empezar. Por supuesto, React aporta cierta comodidad al desarrollo posterior, y bajo el paquete de
React, esta configuración extraña (basada en iOS), incompleta (diseño CSS) parece menos irreconocible.
Además, React Native todavía es muy imperfecto. La documentación aún está incompleta, básicamente terminé la demostración basada en su código de muestra y la documentación para integrarla en una aplicación existente recién se publicó hoy. Según el comunicado oficial, la versión de Android no se lanzará hasta medio año después:
PS.Blog|React Para entonces, es posible que el diseño de todo el sistema también haya sufrido cambios importantes.
PD: cuando usé Tabbar, me sorprendió gratamente descubrir que en realidad usaban un esquema de fuente de íconos y tengo la misma implementación en el proyecto en el que estoy trabajando actualmente, pero cómo diseñar la API me da me duele la cabeza. Como resultado, descubrí que escribió así:
lt;TabBarItemIOS
name="blueTab"
icon={_ix_DEPRECATED('favorites') }
.... gt;
En la definición de _ix_DEPRECATED, hay una nota: // TODO(nicklockwood):
Arriba.
El siguiente es un proceso de análisis de React nativo a través de la solución inversa ipa cuando React nativo no era de código abierto hace una semana. Los amigos interesados pueden consultarlo.
-----------------------Línea divisoria simple y tosca-------------- ------
Antecedentes y métodos de investigación
React
Native aún no es de código abierto. Recientemente, 'descompilé' el grupo de Facebook con mi. hermanos del grupo (esta aplicación se implementa usando React
Native), produje cientos de archivos JS, los formateé y pasé unos días leyendo el código fuente. Estoy familiarizado con React
Tengo un conocimiento básico del mecanismo central interno de Native.
La implementación principal de React Native:
Permítanme mencionar brevemente algunos puntos primero, y los detalles se actualizarán más adelante.
1. React Native no tiene una vista web y no es una aplicación híbrida. La ejecución interna de JS utiliza JavascriptCore.
2. El código también proporciona alrededor de 10 clases principales básicas (RCTDeviceEventEmitter,
RCTRenderingPerf, etc.) o componentes (RCTView,
RCTRenderingPerf, etc.). (THGroupView).
3. Como dijeron en su promoción, han implementado un subconjunto de estilo CSS para resolver problemas de estilo. Se basa en esto para formar los componentes centrales de Native. Los componentes básicos de la capa JS, y luego los componentes comerciales que forman el lado comercial, deben usar facebook/css-layout - versión GitHub del lenguaje C (en el ppt vemos algo como flex-direction: columna, esto es css-layout sintaxis de soporte).
4. En React Native, los ingenieros que escriben JS resuelven el problema de "ensamblar componentes básicos en componentes React utilizables", mientras que los ingenieros que escriben código nativo resuelven el problema de "proporcionar suficiente escalabilidad, flexibilidad y rendimiento de cuestiones de componentes centrales".
Consideraciones de diseño para React Native:
ReactJS tiene un impacto directo en React Native (no he usado React en un entorno de producción, solo he visto el código y usado Angular, si si hay algún error, indíquelo)
ReactJS tiene este diseño internamente:
1.createElement es una entrada de fábrica grande de ReactJS. No devuelve un objeto DOM de entidad, sino solo un. matriz
2. Esta matriz se convierte a DOM usando el código en el directorio ui/browser/ en el código fuente
3. El núcleo de renderizado subyacente es reemplazable
Adicionalmente. Facebook tiene sus propios proyectos de código abierto como JSX, css-layout, etc.
A partir de estos proyectos, si desea crear contenido utilizando JS para una aplicación nativa, es natural pensar en un conjunto de formas más efectivas de alterar las aplicaciones nativas:
1. reemplaza el código dentro de la interfaz de usuario/navegador (en realidad, la versión de iOS inyecta métodos de componentes principales en JS a través del
método injectGenericComponentClass) y luego reutiliza directamente el MVVM de React para asignar automáticamente los datos a Native
2.
El código nativo
implementa tres API principales, una proporciona API para los componentes principales y la otra proporciona métodos para los componentes principales. API, un conjunto de API que proporcionan componentes principales (crear, actualizar, eliminar), un conjunto de métodos de eventos (EventEmitter de ReactJS), un conjunto de métodos para analizar css (css-layout) y un conjunto de estilos Método devuelto como un estilo calculado (llamado featureStyle en React
Native).
De esta manera, se aplican todas las características principales y conceptos de diseño del propio ReactJS, y el desarrollo local es muy simple.
Entonces, ¿qué es React Native?
De hecho, desde la perspectiva del desarrollo nativo, esto equivale a remodelar un motor de renderizado del navegador y configurar un shell React. Desde la perspectiva del desarrollo web, es el backend original de React Cambiar a nativo. código para implementar, al igual que el reciente React Canvas de Flipboard: Flipboard - GitHubreact-canvas
Ventajas y desventajas de React Native:
En relación con las aplicaciones Hybird o aplicaciones web Ventajas:
1. Sin Webview, elimine por completo los problemas de interacción y rendimiento causados por Webview.
2.
2. Fuerte escalabilidad, ya que el lado nativo proporciona controles básicos, JS. se puede combinar y usar libremente
3. Puede usar directamente la animación "impresionante" nativa de Native (en la aplicación FB Group, el panel se desliza con un poco de gelatina Animaciones de explosiones y expansión del panel basadas en un determinado Este punto se puede ver en todas partes. Este tipo de animación es muy sencillo usando código nativo, pero es aún más difícil usar la Web).
Ventajas en comparación con las aplicaciones locales:
1. Puede actualizar la aplicación directamente actualizando el JS remoto, pero esto se ha convertido en el estándar para todas las aplicaciones locales grandes... .
Desventajas:
1. Su escalabilidad es aún mucho menor que la de la Web y no es tan simple como escribir código local directamente (no es necesario explicar esta tontería)
2.
De lo local a la Web, se requiere mucha conversión conceptual, lo que inevitablemente conducirá a compromisos en ambas partes. Por ejemplo, la web necesita usar un conjunto de castración CSS, y el nativo necesita obtener el ejemplo final a través de css-layout
Estilo y luego convertirlo en una expresión nativa (como Constraint\origin de iOS). \Centro y otros atributos) y luego continuar con la producción de animación. Además, si tanto Android como
iOS tienen que realizar el mismo encapsulado, la conversión del concepto será más complicada.
Actualización 1: Se agregó React en React Native.
Actualización 2: Básicamente confirmó su uso de diseño css, se agregó un resumen de React Native
Actualización 3: React nativo ha sido de código abierto: React Native solo está disponible para iOS. Escribí algunas demostraciones, eché un vistazo breve al código objc y lo verifiqué con algunas conclusiones que hicimos antes del código abierto (ver más abajo). Hablemos brevemente sobre las características, ventajas y desventajas de React nativo desde la perspectiva de un ingeniero de front-end y de todo el sistema.
Actualización 4: Se agregaron varios beneficios y referencias cruzadas de desarrollo front-end