Cómo evaluar el desarrollo nativo de iOS de React
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.
La única llamada unidireccional de js-objc en el sistema es asignar los métodos de los componentes nativos de la interfaz de usuario a js a través de javascriptcore o webview (versiones inferiores de iOS. Este diseño es asíncrono). hace que React sea nativo Permite que js se ejecute en el navegador Chrome de escritorio. A través de este diseño, React nativo permite que js se ejecute en el navegador Chrome de escritorio entre el código nativo y el navegador Chrome de escritorio a través de una conexión websocket, lo que facilita enormemente la depuración. El blog de Bang ya ha escrito un artículo detallado sobre este 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 cita razones por las cuales Native "se siente" diferente a la web: respuesta en tiempo real y funcionalidad de cancelación. Los mecanismos correspondientes de React Native están bien diseñados. 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.
¡Depurar es fácil! Después de modificar js a través del monitor nodejs incorporado y compilarlo en un paquete, puede presionar cmd + r en el simulador para ver el efecto. Al presionar cmd+d, puede abrir una ventana del navegador Chrome y todos los js se moverán para ejecutarse en el navegador Chrome, por lo que cualquier punto de interrupción, un solo paso o hacer clic en la pila de llamadas no importarán.
Lo anterior es tanto una característica como una ventaja, a continuación se muestran las desventajas, o debería decir: "¿qué queda"? "En mi opinión, esto está más allá del alcance de la solución Hybird.
El sistema aún (debe) depender de componentes y métodos expuestos por componentes nativos. Por ejemplo, el componente ScrollView en la capa nativa tiene muchos eventos, como scrollViewWillBeginDragging, scrollViewWillEndDragging, scrollViewDidEndDragging, etc. Estos eventos no están expuestos en la versión actual. La versión actual no expone estos eventos, por lo que es básicamente imposible lograr efectos de vinculación de componentes.
Además, hay muchos componentes en esta versión que solo están disponibles para iOS: ActivityIndicatorIOS, DatePickerIOS, NavigatorIOS, PickerIOS, SliderIOS, SwitchIOS, TabBarIOS, AlertIOS, AppStateIOS, LinkingIOS, PushNotificationIOS, StatusBarIOS, VibrationIOS y, por el contrario, el resto son muy Resumen. Componentes básicos. Por lo tanto, los usuarios tienen que escribir dos conjuntos de código para diferentes plataformas y toda la funcionalidad aún depende 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, donde solo necesita aprender algunas API JS más para comenzar. Por supuesto, React aporta cierta comodidad al desarrollo posterior y, bajo el paquete de React, una configuración tan extraña (basada en iOS) e incompleta (diseño CSS) no parece tan irreconocible.
Además, React Native aún está lejos de estar completo. 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. Tengo la misma implementación en el proyecto en el que estoy trabajando actualmente, pero me dice cómo diseñar la API. un dolor de cabeza. Como resultado, descubrí que escribió así:
name="blueTab" icon={_ix_DEPRECATED('favorites')} .... > En la definición de _ix_DEPRECATED, hay un comentario: // 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, lo 'descompilo' con mis hermanos en el grupo de Facebook (esta aplicación lo usa). React Native implementó) código ipa y produjo cientos de archivos JS. Después de formatear, pasé unos días leyendo el código fuente y tengo una comprensión básica del mecanismo central interno de React 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, RCTVPerf, etc.). RCTView, RCTTextField, RCTTextView, RCTModalFullscreenView, etc.), y luego la parte JS de React Native, que incluye alrededor de 20 componentes básicos (Popover, Listview, etc.), que se entregarán al lado comercial superior para su uso (THGroupView ). 3. Como dijeron en su promoción, implementaron un subconjunto de componentes similares a CSS para resolver problemas de estilo. Este subconjunto es bastante complejo y poderoso, confiando en este subconjunto para integrar el núcleo de los componentes nativos. se compilan en componentes básicos de la capa JS y luego se compilan en componentes comerciales en el lado comercial, y los componentes comerciales en el lado comercial deben implementarse utilizando la versión en lenguaje C de facebook/css-layout-GitHub (en ppt, utiliza lenguaje C). (En ppt, vemos algo como flex-direction: column, que es la sintaxis admitida por css-layout). 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 hay algo mal, por favor indíquelo) ReactJS tiene este diseño internamente: 1.createElement es una gran entrada de fábrica de ReactJS. Lo que devuelve no es un objeto DOM de entidad, sino simplemente. una 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. Sobre la base de estos proyectos, si desea producir contenido utilizando JS para aplicaciones nativas, naturalmente pensará en un conjunto de los métodos más efectivos para alterar las aplicaciones nativas: 1. Native Bridge JS reemplaza el código dentro de la interfaz de usuario/navegador (de hecho, la versión de iOS es el método injectGenericComponentClass inyecta métodos de componentes centrales en JS. Puede reutilizar directamente el MVVM de React y asignar datos automáticamente a Native 2.El código nativo implementa internamente tres conjuntos de API principales. Un conjunto de componentes principales proporciona API (crear, cargar y actualizar (crear, actualizar, eliminar)), un conjunto de métodos de eventos (EventEmitter en ReactJS), y un conjunto de análisis CSS (css-layout) y estilo de retorno ComputedStyle (denominado featureStyle internamente en React Native). De esta manera, utilizamos todas las funciones principales y conceptos de diseño del propio ReactJS. y el desarrollo local es bastante 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 las molestias de interacción y los problemas de rendimiento causados por Webview. 2. 2. Fuerte escalabilidad, porque el lado nativo proporciona controles básicos. y JS se pueden 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 una explosión de gelatina La animación de expansión del panel basada en un Cierto 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 de conceptos, lo que inevitablemente conducirá a compromisos en ambas partes. Por ejemplo, la Web necesita usar un conjunto de castración CSS, y Native necesita obtener el estilo final a través del diseño css y luego convertirlo en expresiones nativas (como iOS Constraint\origin\Center y otras propiedades), y luego animar. . Además, si tanto Android como iOS tienen que realizar la misma encapsulación, el concepto de conversión es más complicado. Actualización 1: Se agregó React en React Native. Actualización 2: Confirmación básica del uso del diseño css, resumen agregado de React Native Actualización 3: React Native ha sido de código abierto: React Native solo está disponible para iOS. Escribí algunas demostraciones, miré brevemente el código objc y lo verifiqué con algunas de las 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