Flutter 开源状态管理插件一览

更新日期: 2022-05-20阅读: 1.2k标签: Flutter

楔子

话说孔乙己转行做了程序员,听闻近年来大前端比较火,也跟风学了一阵。什么 vuereactangular 都了解一点。这段时间,行业巨头谷歌出了个 Flutter,号称要一套代码搞定整个前端,孔乙己自然不愿放过。

这天孔乙己逛到了掘金社区,里面大佬太多,他怕自己太业余露馅。知道不能和他们谈天,便只好向初学者说话。有一回在我的评论区问道,“你学过 Flutter 么?”我略略回了个表情。他说,“学过,……我便考你一考。Flutter 的状态管理,怎样写的?”我想,水平和我一样的人,也配考我么?便没有回消息,不再理会。孔乙己等了许久,再一次评论道,“不能写罢?……我教给你,记着!Flutter 状态管理应该这样写。将来做高级工程师的时候,做架构要用。”我暗想我和高级工程师的等级还很远呢,而且我们总监也从不用 Flutter 开发应用;又好笑,又不耐烦,懒懒的答他道,“谁要你教,不就是用一个 setState 方法么?”孔乙己显出极高兴的样子,发了一个 耶的胜利表情,点头说,“对呀对呀!……状态管理有 N 种写法,你知道么?”我自然是没有回答,但他自己却真的列了出来。

Provider

在 Pub 上最受欢迎的状态管理插件之一,凭借简洁、易用、高性能受到了很多 Flutter 开发者的喜爱,更是成为了官方首要推荐的状态管理工具。插件 pub 地址:Provider package。本质上, Provider 是在 InheritedWidget 基础上的封装,使用 Provider 具有如下特性:

  • 简化资源的分配和销毁;

  • 懒加载;

  • 减少了大量创建状态管理相关类代码的工作;

  • 通用的方式去消费 InheritedWidget 共享的数据

  • 对于复杂度显著上升的监听链路,提供了高可扩展性。

setState

最为初级、也是最简单粗暴的状态管理方法,官方的 Hello World 示例用的就是这种方式,优点是简单,缺点嘛 —— 其他状态管理的优点就是它的缺点,那些都是针对这种方式的缺点改进的。当然,也不是不能用,如果只是针对没有子组件或子组件很少的情况,用 setState 也没什么问题。

InheritedWidget 和 InheritedModel

前面介绍的 ModelBinding 就是这种方式, Provider 其实也是这种方式。对 InheritedWidget 进行封装,实现数据在组件树上传递,进而达到状态数据共享和局部刷新的目的。

Redux

类似 React 的状态管理工具 Redux ,本质上是一个状态容器,pub 地址: Flutter-Redux package 。关键在于提供了 3 种 Widget :

  • StoreProvider :基础 Widget ,它会把指定的 Redux 状态数据( Redux Store ) 传递给需要的下级组件;

  • StoreBuilder :一个从 StoreProvider 获取状态的下级组件,它会将获取到的状态传递给一个返回 Widget 的 builder 方法。

  • StoreConnector :一个从最临近的 StoreProvider 祖先组件获取状态的下级组件,然后利用 指定的 converter 将状态转换为 ViewModel 对象后给到 builder 方法。任何时候,状态发出一个更改事件后,该组件会被自动重建,从而无需主动管理事件订阅。

Fish Redux

闲鱼出品的一个基于 Redux 的整体应用框架,对于构建大中型应用来说很合适,pub 地址:Fish-Redux package。与 Redux 的区别是,Fish Redux 是一个应用框架,解决了如应用分治、通信、数据驱动、解耦等问题。作为一个应用框架,优点是可以为团队建立一套统一的规范,当然缺点也有,比如对于小应用来说可能过于庞大,灵活性不足,可能会影响开阀发效率。

BLoC / Rx

一个基于 Stream / Observable 范式的系列,关于介绍可以看官方的文档:Flutter BLoC。

GetIt

GetIt 实际上是一个基于状态管理的服务管理工具,优点是不需要 BuildContext。如果想使用依赖注入、面向接口编程的方式来实现代码解耦和应用管理则十分适合。对应的 pub 包和文档如下:

  • GetIt package:基础的服务管理工具,提供了容器帮助代码找到对应的服务提供对象。

  • GetIt Mixin:GetIt 的扩展,使得 GetIt 可以完全应用于状态管理。

  • GetIt Hooks:GetIt 的另一个扩展,可以用于 flutter_hooks 的场景。

  • Flutter state management for minimalist :一篇介绍 Flutter 状态管理与应用架构的文章,值得仔细阅读。

MobX

基于观察者模式和响应式模式的状态管理库,GitHub 地址: MobX 。 MobX 的目标是将应用的界面和响应式数据连接起来。这种方式是完全自动的,而且感觉很自然(类似双向绑定)。对于开发者而言,只需要关注界面需要消费的响应式数据,而不用担心保持二者的同步。

Flutter Commands

基于 ValueNotifier,使用命令模式实现的响应式状态管理库。最佳的实践是与 GetIt 结合,也可以使用 Provider 或其他容器配合。pub 地址:Flutter Command。

Binder

基于 InheritedWidget 的状态管理包,仿照的是 recoil,目标是想将业务、状态和界面分离解耦。


GetX

一个简化的状态管理解决方案,pub 地址:GetX package。GetX 是一个超轻量、但很强大的 Flutter 解决方案,提供了高性能的状态管理,智能依赖注入和快速可用的路由管理工具。GetX 由于简化了很多实现代码,目前的流行度已经超过了 Provider。

States Rebuilder

States Rebuilder 是高性能,满足预期和可控的状态管理工具。支持可变和不可变的状态,实现了严格的状态控制,并且支持自动清除状态。而且还可以在 StatelessWidget 中使用 setState (状态数据模型类的 setState ,) 更新界面,同样也支持无需 BuildContext 的页面导航和消息提示。GitHub 地址: States Rebuilder 。

尾声

等到孔乙己写完之后,我竟然有点惊到了,难道这些他都会?但碍于颜面,又不好意思问他。只好自己按照他写的那些去搜了一下。至于他是不是都会,也就无从知道了!

总结

由于 Dart 语言和 Javascript 有很多共同之处,因此在 pub 上有很多类似 Javascript 的库,譬如 Redux,MobX 等。实际上,没有最好的状态管理工具,只有最合适的状态管理工具。具体如何选择可以参考以下几点:

  • 更新维护及时性:Flutter 本身的迭代速度很快,因此有些插件如果不及时维护的话意味着你之后的代码全部需要更改,尤其是状态管理这类涉及到整个应用架构的插件。

  • 使用者数量:可以通过 pub 的评分和 Github 的评分来评估使用者的情况,使用人数不多意味着你可能会需要自己踩坑排雷,对于自己玩的话无所谓,但是对于产品开发就可能会影响整个产品的开发进度。

  • 团队适应性:如果是你一个人开发,那可以忽略这一点,但是如果团队有多人,那需要考虑一个大家都能够快速上手的插件。

  • 原生依赖度:有不少插件是需要依赖原生的,而有些原生本身就是第三方的开源代码,如果这些开源代码停止维护了很可能导致 Flutter 的插件也无法更新。因此,除非是官方插件,对于第三方插件要特别小心,如果第三方插件依赖于原生甚至是第三方开源代码,那么就需要注意要慎重选择。如果可以,尽可能选择纯 Dart 的插件。

作者:岛上码农
原文链接:https://xie.infoq.cn/article/2c35d0e6c6534457ad56164bd


链接: https://fly63.com/article/detial/11539

移动跨平台框架Flutter介绍和学习线路

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

初识flutter

关注flutter已经好久,因为没有发正式版,所以一直也不想过早的躺浑水,但是最近无意中看到几篇文章,再加上美团和咸鱼等app也一直在做灰度测试,所以上周开始看了一下官方文档,地址:https://flutter.io/docs/get-started/install,然后在此做一下总结。

深入理解Flutter多线程

Flutter默认是单线程任务处理的,如果不开启新的线程,任务默认在主线程中处理。和iOS应用很像,在Dart的线程中也存在事件循环和消息队列的概念,但在Dart中线程叫做isolate。

Flutter1.5 开始,将成为全平台 UI 框架!

Flutter 1.5 的发布,同期也宣布发布 Flutter for Web 的 Preview 版本,正式开启了 Flutter 的全平台 UI 框架之路。早在年初发布的 Flutter 2019 Roadmap 中,就有提到,会在今年支持移动设备之外的平台,对 Web 的支持,算是完成了一个新的里程碑吧。

Flutter支持Web开发了!

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

Flutter 混合开发 (交互通信)

Flutter 与原生之间的通信依赖灵活的消息传递方式:1,Flutter 部分通过平台通道将消息发送到其应用程序的所在的宿主环境(原生应用)。2,宿主环境通过监听平台通道,接收消息。

Flutter 局部路由实现

Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>。当然Flutter也有类似的Widget,那就是Navigator,不过是以router的形式实现(像<router-view></router-view>)。

Flutter Kotlin 到底该如何选择?

这两个技术在当下如何选择,我之前在公众号上的回复是:如果你已经处于一个比较满意的公司,并考虑长期发展,公司并未使用这两个技术,你可以专心钻研公司当下使用的,或者未来将要使用的,这些才能助你在公司步步高升。

Flutter 与 iOS 原生 WebView 对比

本文对比的是 UIWebView、WKWebView、flutter_webview_plugin(在 iOS 中使用的是 WKWebView)的加载速度,内存使用情况。测试网页打开的速度,只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳

Flutter For Web

用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出了一个预览版的 SDK 可以让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!