Aleteo último marco de código abierto detrás de los 200 millones de usuarios; pescado Redux

fondo

Uso del alboroto en profundidad el proceso de desarrollo, nos encontramos con un par de código de un asunto serio, el código de mantenimiento malo, como en el barro. Necesitamos un marco de desarrollo de aplicaciones unificado para deshacerse de la difícil situación del momento, y esto es un pedazo de terreno baldío aleteo tierra virgen.
FISH Redux resolver los problemas anteriores es el marco superior aplicación de capa, que se monta en un bastidor de aleteo aplicaciones de gestión de datos Redux, especialmente para aplicaciones grandes y complejas de construcción.
Su principal característica es un perfil de montaje, por una parte, una página grande, y ver los datos de las capas desmantelamiento de independientes entre sí Componente | adaptador, responsable del montaje de la parte superior, inferior competente para la aplicación, por otra parte, el componente | Adaptador de Split Ver mutuamente contexto separada, Reductor, Efecto otras funciones no relacionadas. Por lo que será muy limpia, fácil de escribir, fácil de mantener, y una fácil colaboración.
Peces Redux inspiración principalmente de Redux, Reaccionar, Elm, excelentes marcos como Dva, mientras que el Redux peces de pie sobre los hombros de gigantes, se centrará, divide y vencerás, multiplexación, además aislar hacer.

diagrama de la arquitectura en capas

Gráfico, el principal de abajo hacia arriba, dividida en tres capas, cada nivel de capa de barrera para resolver problemas y contradicciones, a fin de ampliar a continuación.

Redux

  • Redux es un marco de gestión de datos front-end de la comunidad, el desarrollo de los estudiantes nativos que podría ser un poco extraño, hacemos una introducción breve.

Redux ¿qué hacer?

  • Redux es un marco utilizado para la depuración de gestión de datos predecible y fácil. Todas las adiciones y supresiones a cambio de búsqueda de datos y otras operaciones por Redux para centrarse en responsable.

Redux es como el diseño y la implementación?

  • marco Redux es una fórmula función de gestión de datos.

    传统 OOP 做数据管理,往往是定义一些 Bean,每一个 Bean 对外暴露一些 Public-API 用来操作内部数据(充血模型)。
    函数式的做法是更上一个抽象的纬度,对数据的定义是一些 Struct(贫血模型),而操作数据的方法都统一到具有相同函数签名 (T, Action) => T 的 Reducer 中。
    FP:Struct(贫血模型) + Reducer = OOP:Bean(充血模型)
    同时 Redux 加上了 FP 中常用的 Middleware(AOP) 模式和 Subscribe 机制,给框架带了极高的灵活性和扩展性。
    贫血模型、充血模型 参考:
    [https://en.wikipedia.org/wiki/Plain_old_Java_object](https://en.wikipedia.org/wiki/Plain_old_Java_object)
    
    

deficiencias Redux

  • Redux sólo se refería a la gestión de datos básicos, no nos importa lo que el escenario específico para usarlo, que es sus ventajas pero también sus desventajas.

  • Nos enfrentamos a dos problemas específicos en el uso real en Redux

    • contradicción Redux entre componente centralizado y partición.
    • capas Redux de Reductor necesidad de manualmente montar, traer la naturaleza tediosa y propenso a errores de.

Peces Redux mejorado

Gestión de datos de pescado Redux Redux Haciendo centralizada observable. Sin embargo, no sólo esto, las desventajas tradicionales en el uso de Redux nivel en el escenario para el desarrollo de páginas aleteo lado de latitudes medias, que mejor a través de la abstracción más alto, hacer mejoras.
Una necesidad de definir un componente de datos (StructEntryTable) y un reductor. Mientras tanto existe dependientes relación padre-hijo entre los componentes. Través de esta capa dependencias,
resolvemos la contradicción entre el [centralizada] y [partición], mientras que el Reductor manual de combinar las capas se vuelven automáticamente por el marco, lo que simplifica en gran medida la dificultad de utilizar Redux.
Conseguimos el efecto de código y la partición del conjunto ideal.

seguir las normas de la comunidad

  • Estado, acción, Reductor, tienda, Middleware y por encima de ReduxJS concepto de comunidad es exactamente el mismo. Vamos a conservar todas las ventajas del original de Redux.
  • Si usted quiere tener un cerrador comprensión de Redux, consulte  https://github.com/reduxjs/redux

Componente

La encapsulación de componentes se muestran y la función del local. Redux se basa en el principio, modificamos la función subdividido en datos funcionales (reductor) y datos no modificado funcional (efectos adversos efecto).
Así que nos dio los tres elementos de la vista, Efecto, Reductor de tres partes, llamadas componentes, son responsables de los componentes de la pantalla, el comportamiento de los datos no modificada, datos de modificación de conducta.
Este es un momento para, sino también para el futuro de división. Por el momento parece Redux-orientado, gestión de datos y otros. En el futuro UI UI-Automation parece expresarse y otros.
la expresión de la interfaz de usuario de programadores está a punto de entrar en la era de la caja de negro, los ingenieros de I + D se centrará más en el comportamiento de los datos no modificados, modificar los datos sobre el comportamiento.
Componente es la partición de vista, sino también dividir los datos. Divide y vencerás a capa por capa, vamos a la página de datos complejos y cortar en pequeños módulos independientes. Esta será propicio para el desarrollo de la cooperación dentro del equipo.

sobre Vista

Ver es sólo una firma de función: (T, Despacho, ViewService) => Widget
que contiene principalmente información en tres áreas

  • Es totalmente impulsado por una vista de datos.

  • Ver evento producido / devolución de llamada, emitido la "intención" de Despacho, no la implementación.

  • Componentes necesidad dependencia para utilizar la llamada a través de la estandarización ViewService.

    比如一个典型的符合 View 签名的函数![](https://img.alicdn.com/tfs/TB1ymUNCgHqK1RjSZFPXXcwapXa-1198-1098.png)
    
    

Acerca de Efecto

Efecto de la modificación es la definición de un comportamiento no estándar de los datos, que es una firma de la función: (contexto, la acción) => Objeto
Incluye principalmente información cuatro aspectos

  • Vista desde la recepción de la "intención", incluyendo devoluciones de llamada de ciclo de vida, y luego hacer una implementación específica.

  • Puede ser una las funciones de procesamiento asíncrono, los datos pueden ser modificados en el proceso, por lo que no somos partidarios de datos de retención, y para obtener los últimos datos por el contexto.

  • No modifica los datos, si desea reparar, deben enviar una acción de ir procesamiento reductor.

  • Se limita a la bool valor de retorno o futuro, que corresponde a apoyar las funciones sincrónicas y un co-rutina flujo de procesamiento.

    比如:良好的协程的支持![image.png](https://img.alicdn.com/tfs/TB1bTgVChYaK1RjSZFnXXa80pXa-1256-944.png)
    
    

sobre Reductor

firma de la función Reductor es una especificación Redux totalmente compatible: (T, Acción) => T
número en línea con el Reductor firmado

Hemos configurado explícitamente widget de manera de lograr grandes componentes dependen, registro del adaptador, esta configuración depende llamado Dependencias.
Por lo tanto, no es tal una fórmula de componentes = Ver + Efecto (opcional) + Reductor (opcional) + Dependencias (opcional).
Un conjunto típico

Al abstraer de componentes, se obtiene una partición completa, y la multiplexación más libertad, mejor desacoplamiento.

Adaptador

El adaptador también encapsular la pantalla y las funciones del local. Nace ListView escena de alto rendimiento, que es una variación de implementar el componente.

  • Su objetivo es resolver tres problemas Modelo de componentes en la escena del aleteo-ListView

    • 1) un "Big-Cell" en componentes, incapaces de disfrutar el código ListView optimización del rendimiento.

    • 2) El componente no puede distinguir aparecerá | desaparecer y init | disponer.

    • 3) Efecto del ciclo de vida de acoplamiento y Vista, en la escena ListView no cumple con las expectativas intuitivas.

      概括的讲,我们想要一个逻辑上的 ScrollView,性能上的 ListView ,这样的一种局部展示和功能封装的抽象。
      做出这样独立一层的抽象是,
      我们看实际的效果, 我们对页面不使用框架,使用框架 Component,使用框架 Component+Adapter 的性能基线对比
      
  • . Reductor se vive de largo, Efecto es vivido medio, Vista es de corta duración
    que hacemos a través de pruebas de comparación continua a una máquina androide, por ejemplo:

  • Marco de FPS antes de utilizar nuestra página de detalles, la línea de base 52FPS.

  • El uso de marcos, utilice sólo el marco del componente abstracto, FPS se reduce a 40, sufrió una trampa "Big-Cell".

  • Después de usar marcos, durante el uso del adaptador abstracto, FPS elevó a 53, de nuevo por encima de la línea de base, hay una pequeña elevación.

Directorio

estructura de directorios recomendada sería como este

 

sample_page
-- action.dart
-- page.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart
components
sample_component
-- action.dart
-- component.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart

Responsable del montaje de la capa superior, la capa inferior es responsable de la implementación, mientras que habrá un plug-in ofrece, para que se llenan rápidamente.
Con el fin de liberar el escenario de pescado como un ejemplo de los detalles del conjunto de:

Entre los componentes y los componentes son completamente independientes de los componentes y contenedores.

Mecanismo de comunicación

  • Componentes | adaptador de comunicaciones internas

  • Componentes | comunicación interna entre el adaptador

    ![](https://img.alicdn.com/tfs/TB1GrISCkzoK1RjSZFlXXai4VXa-1846-986.png)
    简单的描述:采用的是带有一段优先处理的广播, self-first-broadcast。
    发出的 Action,自己优先处理,否则广播给其他组件和 Redux 处理。
    最终我们通过一个简单而直观的 dispatch 完成了组件内,组件间(父到子,子到父,兄弟间等)的所有的通信诉求。
    
    

Mecanismo de refresco

Actualizar los datos

  • Modificar datos locales, desencadena automáticamente un poco profunda copiar datos de la capa superior, el código de servicio de capa superior es transparente.

  • Copia de las capas de datos de

    • Por un lado es Redux modificación de datos estricto seguimiento.

    • La otra es seguir una estricta espectáculo impulsado por los datos.

      ![](https://img.alicdn.com/tfs/TB1BjQLCkvoK1RjSZFNXXcxMVXa-1714-828.png)
      
      

actualización de la vista

  • aviso plana para todos los componentes, el componente de shouldUpdate determinar si necesitan ser refrescados

    ![](https://img.alicdn.com/tfs/TB1PkgHCbPpK1RjSZFFXXa5PpXa-1380-620.png)
    
    

ventaja

La gestión centralizada de los datos

  • La gestión de datos centralizada a través de una Redux hacer observable. Vamos a conservar todas las ventajas de la Redux original, mientras que en la fusión Reductor, se convierte en el agente automáticamente por el marco, lo que simplifica en gran medida el uso de grados engorrosos Redux.

componente de gestión de particiones

  • Componentes de vista tanto de la partición, pero también dividir los datos. Divide y vencerás a capa por capa, vamos a la página de datos complejos y cortar en pequeños módulos independientes. Esta será propicio para el desarrollo de la cooperación dentro del equipo.

Ver, Reductor, aislamiento Efecto

  • El conjunto dividido en sin estado función no dependiente tres. Debido a que no es una función del estado, es más fácil de escribir, depurar, probar y mantenimiento. Al mismo tiempo que aporta más combinaciones, la reutilización y la innovación posible.

conjunto de configuración declarativa

  • Componentes, reunidos por el adaptador para completar la configuración que consiste en declarativa. Incluyendo su punto de vista, Reductor, Efecto, y depende del niño.

buena escalabilidad

  • El marco básico para mantener sus tres preocupaciones principales, no hacer cosas fuera del foco de la base, mientras se mantiene la escalabilidad superior flexible.

    • Incluso la impresión marco sin ninguna línea de código, podemos observar el cambio en el flujo de datos, por componentes estándar Middleware.
    • Fuera del marco de los tres núcleos, añadir mixin también ser Adaptador de componentes o un dardo a través de las características del lenguaje, modulares y flexibles para personalizar y mejorar su capacidad de utilizar la parte superior.
    • Y otro marco middleware abierto, como la exposición automática, alta disponibilidad, son transparentes y entre el bastidor intermedio, el conjunto que consiste en la capa superior.

Multa pequeña, sencilla, completa

  • Es muy pequeño, sólo contiene más de 1.000 líneas de código.
  • Es fácil de varias pequeña función completa, se ha montado para funcionar.
  • Es completo.

Usted puede mirar, se puede ver la tecnología de desarrollo más Android y el intercambio de datos avanzada ~ seca

Publicado 56 artículos originales · ganado elogios 1 · vistas 2906

Supongo que te gusta

Origin blog.csdn.net/chuhe1989/article/details/104641853
Recomendado
Clasificación