闲鱼专家详解:Flutter React编程范式实践

　　作者：闲鱼技术-匠修

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

　　Reactive的诞生

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

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

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

　　Flutter的Reactive特性

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

　　1.描述界面而不要操作界面

　　有一种说法认为函数式语言和命令式语言的不同在于命令式语言是给计算机下达指令而函数式语言是向计算机描述逻辑。这种思路在Flutter UI中得到了体现。Flutter不提倡去操作UI，它当然也基本不会提供操作View的API，比如我们常见的类似TextView.setText(),Button.setOnClick()这种是不会有的。对界面的描述是可以数据化的(类似XML，JSON等)，而对界面的操作是很难数据化的，这很重要，响应式需要方便可持续的将数据映射成界面。

　　在Flutter中用Widget来描述界面，Widget只是View的“配置信息”，编写的时候利用Dart语言一些声明式特性来得到类似结构化标记语言的可读性。不论Stateless Widget 还是 Stateful Widget都是不可变的(immutable)，其中的成员变量也应该都是final的，也就是说，Widget是“只读”的。Widget是数据的映射，当数据改变的时候，我们需要重新创建Widget去更新界面，这意味着Widget会创建销毁的非常频繁，不过Flutter使用的Dart虚拟机能高效的处理这种短周期的轻量对象。

　　这种设计思路对刚接触的开发者可能有些不习惯，我们可以借助开发Android中的ListView(iOS中的TableView)来理解：我们通常先准备好一个数据List,然后实现一个Adapter来将List中的items映射成一个个itemView，最后将List和Adapter设置给ListView。这样当我们改变List中的数据，ListView就会相应的刷新View。Flutter类似，我们准备好Widgets(只不过Widget的“容器”是Tree而不是List)，Flutter会提供Adapter(RenderObjectToWidgetAdapter)将其映射成渲染用的RenderObject，当Widget更新时就会刷新界面。

　　另外，Widget也能通过设置Key来缓存复用，在类似ListView的场景中，Item Widget的复用是很有收益的。

　　2.基于共同祖先通信

　　在我们国家，如果你想和别人沟通上拉近距离，有时候会进入到类似“我们500年前是一家”的这种语境中。在Flutter中，如果两个组件要通信，也是去找祖先(当然，也有可能两个组件本身就有遗传关系)，Flutter把它描述成“数据上行，通知下行”。

　　但是，在一个非常复杂的树形层级中，要找到某位“祖先”并不是很容易的事情，而且性能也不好。Flutter为此做了优化，提供了InheritedWidget，“祖先”Widget继承该类型后，child可以通过BuildContext中提供的inheritFromWidgetOfExactType方法方便的找到在层级中离的最近的那位“祖先”。该方法做了优化，效率很高，并且可以让child和“祖先”建立依赖关系，方便做刷新。

　　Flutter中并没有提倡类似controller的概念(像Android中的Activity，iOS中的ViewController),本身View是不可操作的，controller也就失去了意义。那么，组件之间的通信就必须在View层“自力更生”了。

　　3.函数式数据流

　　这肯定不是Flutter才有的，要想把响应式实现的简洁优雅，就要利用好语言的函数式特性。Flutter的亮点是它使用的Dart语言能把这件事情变的很轻量，你基本不需要引入什么第三方库就能做到(不过确实有RxDart库，但感觉只是做了额外的增强)，而且明显语言Api的设计也往这个方向上做了优化，非常方便。具体可以看看Stream和RxDart。

　　基于React的框架实践

　　统一状态管理和单向数据流

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!