Flutter React编程范式实践

闲鱼技术

于 2018-07-17 11:55:00 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/weixin_38912070/article/details/93857066

版权

Flutter Widget的设计灵感来源于React,是一款原生就立足于响应式的UI框架。本文基于Flutter特点，试图结合闲鱼在Flutter的工程应用来谈下我们对Flutter React编程范式的思考和践行。

Reactive的诞生

谈起UI总会讲到MVC，它出现的时间很早，那时候还没有普及现代GUI广泛使用的事件驱动(消息循环)模型，所以很长的时间内，MVC都在进化，不断的被重新定义。到现在MVC已经是一个很宽泛的概念了。使用基础的MVC作为框架来开发容易出现模块职责边界模糊，逻辑调用方向混乱。GUI框架进化后，将用户事件的分发处理集成到了View模块中，由此出现了MVP，MVP职责划分较清晰，逻辑调用方向也比较好把握，但是很繁琐，开发效率不高。再随着Web的发展，标记语言被应用于界面描述，开始出现逻辑界面分离和无状态化界面，MVVM应运而生。MVVM让架构层面来提供数据和View的双向绑定，减轻了开发工作，但有时候也带来了一定程度的状态混乱。函数式编程在近年被重新提起，并引发潮流，催生了响应式界面开发，响应式是对GUI事件驱动模型的一种返璞归真。

个人对前端架构迭代的理解:

640?wx_fmt=png

从迭代历程上看，Model和View是两个相对固定的角色，它们容易理解，也能很好的确定职责边界。如何去沟通Model和View是架构设计的关键，响应式的一般做法是让Model回到最初的事件驱动，结合函数式的数据流来驱动View刷新。这样有比较清晰的角色划分和简单易于理解的逻辑链接，能较好的统一编程模式。

640?wx_fmt=png

Flutter的Reactive特性

通常GUI框架都有一些共同点，比如View的树形层级，消息循环，Vsync信号刷新等，Flutter也继承这些经典的设计，但是Flutter并没有使用标记语言来描述界面(例如Web中的HTML，Android中的XML)，这其中有Flutter立足于响应式的初衷。Reactive是一款将事件数据流作为核心的开发模型，UI框架会提供相应的特性来提供更好的支持。