javascript - example - react js app

Enlace de datos bidireccional(Angular) frente a flujo de datos unidireccional(React/Flux) (4)

Enlace de datos de dos vías de Angular

Es posible gracias a un mecanismo que sincroniza la vista y el modelo cada vez que se modifica. En Angular, actualiza una variable y su mecanismo de detección de cambios se encargará de actualizar la vista y viceversa. ¿Cuál es el problema? No controlas el mecanismo de detección de cambios. Me encontré teniendo que recurrir a ChangeDetectorRef.detectChanges o NgZone.run para forzar la actualización de la vista.

Para no sumergirse demasiado en la detección de cambios en Angular, confía en que actualizará lo que necesita cuando cambia una variable, o cuando se modifica después de que se resuelve un observable, pero encontrará que no tiene idea de cómo y cuándo se ejecuta. y algunas veces no actualizará su vista después de que cambie una variable. No hace falta decir que a veces puede ser un dolor encontrar dónde y cuándo ocurrió un problema.

Reactiva el flujo de datos unidireccional

Significa que la vista siempre obtiene su estado del modelo. Para actualizar la vista, primero debe actualizar el modelo y luego volver a dibujar la vista. React hace que el proceso de redibujado de la vista sea extremadamente eficiente porque no compara el DOM real sino el DOM virtual que guarda en la memoria. Pero, ¿cómo funciona la detección de cambios en esta dinámica? Bueno, lo disparas manualmente.

En React, establece el nuevo valor del estado, que a su vez provoca un ReactDOM.render, que hace que el proceso de comparación / actualización de DOM. En React / Redux, usted envía acciones que actualizan la tienda (fuente única de la verdad) y luego el resto. El punto es que siempre se sabe cuándo cambian las cosas y qué causó el cambio. Esto hace que la resolución de problemas sea bastante sencilla. Si su aplicación depende del estado, la observa antes y después de la acción que desencadenó el cambio y se asegura de que las variables tengan el valor que deben.

Implementaciones aparte

Desde un punto de vista independiente de la plataforma, no son tan diferentes. Lo que separa el flujo unidireccional del enlace bidireccional es una actualización variable en el cambio. Por lo tanto, su impresión de que no están demasiado alejados entre sí conceptualmente no está demasiado separada de sus usos prácticos.

En la última semana, he estado tratando de entender cómo el enlace de datos bidireccional (Angular) y el flujo de datos unidireccionales (React / Flux) son diferentes. Dicen que el flujo de datos unidireccionales es más poderoso y más fácil de entender y seguir : es determinista y ayuda a evitar los efectos secundarios. Sin embargo, en mis ojos de novato, ambos se ven bastante parecidos: la vista escucha el modelo, y el modelo reacciona ante las acciones realizadas a la vista. Ambos afirman que el modelo es la única fuente de verdad .

¿Podría alguien explicar de manera comprensible de qué manera son realmente diferentes y cómo el flujo de datos de una sola vía es más beneficioso y más fácil de razonar?

El flujo de datos aquí es un flujo de eventos de escritura , es decir, actualizaciones de estado
Estos eventos fluyen entre vistas y controladores (y servicios, como los backends HTTP)
El flujo unidireccional es básicamente el ciclo gigante:
- la vista de la aplicación usa ( lee , no escribe ) el estado de la aplicación para renderizar
- cuando la aplicación recibe algunos estímulos del exterior (el usuario escribió algo de texto en el campo de entrada o el resultado de la solicitud HTTP ha llegado), emite un evento de escritura o, en la jerga Redux / Flux, envía una acción
- todos los eventos, desde todos los controladores y vistas, fluyen hacia la función de envío único de sumidero (reductor); aunque la naturaleza de la función de envío permite que se componga de funciones de envío más simples, conceptualmente, solo hay un distribuidor para toda la aplicación
- el despachador usa un evento para determinar qué parte del estado se actualizará
- ir a empezar
El enlace de datos de flujo bidireccional alias se une a dos estados: en la mayoría de los casos, uno dentro del controlador (por ejemplo, alguna variable) y otro dentro de la vista (por ejemplo, contenido del cuadro de texto). La unión significa que, cuando una pieza cambia, la otra pieza también cambia y obtiene el mismo valor, por lo que puede pretender que solo hay una pieza de estado involucrada (mientras que en realidad hay dos). Los eventos de escritura van y vienen entre los controladores y las vistas, por lo que son bidireccionales .
El enlace de datos es genial cuando necesita averiguar qué variable contiene el contenido de este cuadro de texto en particular; se muestra de inmediato. Pero requiere un marco complejo para mantener la ilusión de una pieza de estado donde realmente hay dos piezas. Por lo general, se verá obligado a usar la sintaxis específica del marco para escribir el código de sus vistas, es decir, para aprender otro idioma.
El flujo de datos en una sola dirección es genial cuando puede aprovechar esa entidad adicional: el flujo de eventos. Y, por lo general, puede: es útil para Deshacer / Rehacer, la reproducción de acciones del usuario (por ejemplo, para la depuración), la replicación, etc. de la sintaxis específica del marco. Por otro lado, dado que ya no tiene enlace de datos, ya no le ahorra algo al instante.

Además, vea una gran explicación visual en esta respuesta: https://.com/a/37566693/1643115 . Las flechas de un solo encabezado y de dos encabezados representan visualmente el flujo de datos unidireccional y bidireccional respectivamente.

Digamos que su aplicación es solo un flujo de asistente, pero tiene algunas interacciones complejas, es decir, un paso podría cambiar el comportamiento de los siguientes pasos.

Su aplicación se está ejecutando muy bien, pero un día un usuario informa de un error en uno de los pasos difíciles.

¿Cómo funcionaría la depuración en enlace bidireccional y enlace unidireccional?

Encuadernación de dos vías

Comenzaría a comprobar qué comportamiento es diferente y, con un poco de suerte, llegaría al mismo punto que el usuario y señalaría el error. Pero al mismo tiempo , puede haber una interacción extraña entre las diferentes partes de la aplicación . Es posible que tenga algún enlace de datos que sea incorrecto (por ejemplo, replicar el estado del modelo pero no el enlace) u otra complejidad extraña entre los componentes que es difícil de depurar. Puede ser difícil aislar el error.

Encuadernación unidireccional

Sólo tienes que agarrar el objeto de state . Tiene toda la información de la aplicación actualmente en un objeto javascript grande. Cargas el mismo estado en tu entorno de desarrollo, hay una gran posibilidad de que tu aplicación se comporte exactamente igual . Incluso puede escribir una prueba con el estado dado para la regresión y señalar el problema exacto que está ocurriendo.

Conclusión

En pocas palabras, el enlace unidireccional facilita mucho la depuración de aplicaciones complejas . No tiene que hacer mucho y luego copiar sobre el estado actual del usuario.

Incluso eso no funciona, puede registrar las acciones también. No hay AFAIR una forma fácil de rastrear todas las acciones de modificación de estado en Angular, por ejemplo. Con Redux es bonito, bastante fácil .

En Angular tienes muchos controladores. Un ejemplo sería un usuario que activa una acción en la Vista 1 que es administrada por el Controlador 1. El Controlador 1 hace algo, pero también activa un evento capturado por otro Controlador 2. El Controlador 2 actualiza algunas propiedades en $ scope y la Vista 2 se presenta de repente cambiado

De repente, una operación en la Vista 1, la Vista 2 actualizada. Si ahora agregamos algunas devoluciones de llamada asíncronas y un poco más de cadenas de eventos, es posible que ya no sepa exactamente cuándo o cómo se actualizan sus vistas.

Con Flux / Redux, tiene un flujo de datos unidireccional. La vista nunca actualiza el modelo, las vistas solo pueden enviar una acción (intención de actualizar), pero permiten que la tienda / reductor decida cómo manejar la actualización. Puede razonar más fácilmente sobre el flujo de datos porque puede ver fácilmente qué acciones pueden activarse en cada vista. Luego haga un seguimiento para ver cómo la acción está siendo manejada por la tienda y puede saber exactamente qué se puede actualizar.