首页 存档 技术 查看内容

ReactNative的架构设计

2018-3-30 13:00 |来自: 互联网 320 0

摘要: 架构师(JiaGouX)我们都是架构师! 请注意,本篇写的是react native的架构设计,如果你用react来开发web程序,本篇文章只能仅供参考,问题都没有在web上去考虑过。 本篇较长,前面是目前flux开源框架的一些分析, ...

架构师(JiaGouX)
我们都是架构师!


请注意,本篇写的是react native的架构设计,如果你用react来开发web程序,本篇文章只能仅供参考,问题都没有在web上去考虑过。

本篇较长,前面是目前flux开源框架的一些分析,后面是架构设计过程。您可以直奔主题。

用RN最大的难题是设计思想的转变,以前的设计方法论已经不太适用了。而RN仅仅提供了view的框架,构建完整app的架构并没有直接提供。

考虑目前遇到的如下问题,希望架构给出解决方案。

  1. 交互:如何解决组件间通信【父子、子父、兄弟等,特别是跨层or反向数据流动等】;用state还是接口操作组件;

  2. 职责:组件状态放哪,业务逻辑放哪,数据放哪,因为太灵活了,怎么做都可以实现功能,但是怎么做才是最好的,才是最正确的呢?

todo一个问题:由于react是面向状态编程,相当于react的组件只关注数据的最终状态,数据是怎么产生的并不关心,但是某些场景下,数据如何产生的是会影响到组件的一些行为的【比如一个新增行要求有动画效果,查询出的行就不需要等】,这在RN中很难描述。。。。。

RN架构就是为解决上述问题提供的指导和方法论,是通盘考虑整个开发、测试、运维的状况,做出的考虑最全面的抉择,或者为抉择提供依据。

目前为react服务的架构也有一些了,如Flux,Reflux,Redux,Relay,Marty。

Flux

flux是官方提供的架构,目的是分层解耦,职责划分清晰,谁负责干啥很明确。具体描述可以参考官方文档,这里不详述。

  1. action 封装请求

  2. dispatcher 注册处理器、分发请求

  3. store 是处理器,处理业务逻辑,保存数据

  4. view 根据store提供的数据进行展现;接受用户的输入并发出action请求。

数据流动:
Action-

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部