Flutter 状态管理(详细解释一切#yyds干货盘点#)

五陵年少金市东,银鞍白马渡春风。这篇文章主要讲述Flutter 状态管理:详细解释一切#yyds干货盘点#相关的知识,希望能为你提供帮助。

作者:坚果
公众号:"??大前端之旅??"
华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,??开源项目GVA成员之一??,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,javascript。
跨平台开发使许多人重新思考他们对技术和工具的选择。现代网络比以往任何时候都更强大。无论平台或设备如何,现代网络都是为了向全世界最广泛的受众提供最好的体验。
Flutter 是跨平台开发领域的热门话题。它是来自 Google 的更快、现代且跨平台兼容的 UI 库。
不仅是 Flutter,Flutter 的状态管理也在 Flutter 社区中流行。??使用 Flutter 开发应用程序??已成为一种流行趋势,开发人员正在利用它来构建漂亮的应用程序。
本文旨在详细介绍Flutter 状态管理主题。我们希望这篇文章能让你以最好的方式理解这个话题。
让我们从基础开始。
什么是状态管理?
在软件开发世界中,状态是您随时重建 UI 所需的信息。
【Flutter 状态管理(详细解释一切#yyds干货盘点#)】无论您是构建移动应用程序还是 Web 应用程序,状态管理都很重要。它指的是对一个或多个 UI 控件的状态的管理。UI 控件可以是文本字段、单选按钮、复选框、下拉列表、切换、表单等等。
一个网站/Web 应用程序由许多这样的 UI 控件组成,一个 UI 控件的状态取决于其他 UI 控件的状态。每个框架都有自己的方式来管理 UI 控件的状态。
为什么状态管理很重要?为什么我们需要状态管理?状态管理在应用程序开发中非常重要。它集中了各种 UI 控件的所有状态,以处理跨应用程序的数据流。
例如,假设您想在用户第一次访问时显示“欢迎”消息,但在后续页面访问时不显示,您需要用户的状态。告诉每个页面来管理用户的状态会增加代码的复杂性,也会导致代码的重复。
或者只是考虑在按钮提交或处理错误消息时显示消息,在任何情况下,都需要该 UI 控件的状态才能采取进一步的操作。
状态管理有助于解决这些问题:用户刷新浏览器URL时页面如何处理?服务器数据更新/刷新时该怎么办?组件或服务如何感知状态?当更新页面时,请求是如何向服务器发出的?
管理应用程序的状态是最重要和必要的过程之一。它就像一个应用程序的表示,或者简单地说,您可以说状态是应用程序对用户的了解、他们在哪里、他们输入了什么信息,以及用户输入信息后 UI 控件的状态是什么。
状态管理可以在两边进行——前端状态管理和后端状态管理。
现在,我们来到了主要部分,Flutter如何处理状态管理。
了解 Flutter 状态管理首先,我们需要记住 Flutter 是声明式的。
当您开发应用程序时,有时您需要在应用程序之间、屏幕之间共享应用程序屏幕。
来源:??flutter.dev??
Flutter 构建其 UI 以反映其应用程序的当前状态。例如,当您的应用程序的状态发生变化时,您会更改状态并且 UI 会从头开始重建。这里不是强制执行的。
Flutter 从头开始重建 UI,而不是在需要时对其进行修改。Flutter 很快就能做到这一点。
在我们继续学习 Flutter 为状态管理提供的不同方法之前,让我们学习基本的、概念性的状态类型。
  • ##### 短暂状态:
  • ##### 应用状态:
临时状态表示单个小部件的本地状态。它可以是 PageView 中的当前页面或动画的当前进度或 UI 的任何当前本地状态。
有了这种状态,就不需要使用任何状态管理方法,因为这可以管理并且不是那么复杂。它非常简单直接,但不适合大型应用程序,并且使状态维护变得复杂。
您可以简单地使用Statefulwidget和setState()方法来获取状态。

来源:??flutter.dev??
Flutter 让您可以自由选择应用程序的架构风格。但与此同时,您需要尝试和测试每个概念,以决定如何组织或构建您的应用程序。如果您想了解不同的技术如何与演示代码一起工作,有一个项目,即??Flutter 架构示例??,它使用相同的“Todo”应用程序演示不同的概念和工具。
什么是应用状态?在应用程序的许多部分之间共享并在用户会话中使用的状态。用户的登录信息、社交网络或电子商务应用程序中的通知或用户偏好是应用程序状态的一些示例。
在这里,您需要确定用于管理应用程序状态的状态管理技术。有很多方法可以实现应用程序状态,但选择主要取决于应用程序的复杂性和性质。
注意:您可以使用State和setState()来管理应用程序中的所有状态。没有硬性规则来区分变量的状态。
状态管理方法/技术清单:
  • Provider
  • InheritedWidget & InheritedModel
  • SetState
  • Redux
  • Fish-Redux
  • BLoC/Rx
  • Flutter Commands
  • GetIt
  • MobX
  • Riverpod
  • GetX
Provider:Provider 包是 InheritedWidgets 的包装器,使它们更易于重用和使用。它不需要太多代码,它是一种最基本的提供者形式。它接受一个值并表示它,但它不注意它提供的值的变化。
InheritedWidget & InheritedModel:InheritedWidget 是从上到下有效地将所有数据沿树向下传递的基类。它只是允许树中的任何下面的 Widget 访问 Inherited Widget 的属性。当应用程序大小很大时,这种方法会变得复杂,因为它会产生很多样板。InheritedModel 是一个继承的小部件,它允许用户指定他们关心的数据和部分,并仅重建必要的后代。它确保继承的小部件依赖项不应无条件地重建。
SetState:我们已经在上面的段落中讨论了setState 。setState 对于本地的、特定于小部件的状态管理非常有用。
Redux :Redux 是一种单向数据流架构,它使关注点分离,即业务逻辑和表示逻辑。
熟悉 React Native 框架的人,也熟悉 Redux 架构。由于应用程序部分的不同分离,它可以帮助开发人员更快、更轻松地进行 UI 更改,也使调试更容易。它是单向的,更适合同步情况。
你知道吗?
在 Flutter 中,每个 UI 组件都是一个小部件。This Everything 是一个小部件架构,有助于提高代码的可读性、可理解性和可维护性。
Fish-Redux:Fish-Redux 是一个基于 Redux 架构的高级组装 Flutter 应用框架。它适用于构建中型和大型应用程序。它由阿里巴巴科技开发,然后转向开源。
它正在阿里巴巴的闲鱼交易平台中使用。它主要关注可配置的组装,旨在提高 Redux 的重用和隔离功能。
Redux 和 Fish Redux 两个框架都在不同的层上工作并简化了状态管理。
BLoC/Rx:BLoC 是一个业务逻辑组件。它是一个状态管理系统,允许开发人员从一个中心位置访问数据。它是 Google Developers 推荐的方法,也是 Flutter 中用于管理状态的最常用架构。
BLoC/Rx 是 BLoC 和 reducer 模式的组合。Reducers 是将当前状态和动作作为参数并以状态形式返回新结果的函数。
它是如何工作的?
它简单地处理输入并通过 Stream 并生成输出。它类似于 MVP 或 MVVM 架构。它将 Stream(Events) 转换为传出状态的 Stream。
资料来源:??solutelabs.com??
Flutter命令:Flutter 命令是另一种基于ValueNotifiers管理状态的方法。在这里,命令指的是包装函数的对象。
ValueNotifier 是一种特殊类型的类,它扩展了ChangeNotifier。ChangeNotifier 提供notifyListeners()方法来通知监听器的属性变化。ValueNotifier 可以保存单个值。ValueNotifier 不是在调用 setState() 时重建整个小部件树,而是通过在值更新/更改时通知小部件来更好地管理状态。
每当调用 notifyListeners() 时,它的所有侦听器的小部件(订阅的小部件)都会重新构建,即使小部件的属性没有更改。
GetIt :GetIt 可用于从 UI 而不是 InheritedWidget 或 Provider 访问对象。GetIt 不是一种状态管理技术,但它是对象的服务定位器。服务定位器是一个将接口与主实现分离的概念,还允许从应用程序的任何地方访问具体实现。
它易于使用且速度极快。与 Provider 或 Redux 不同,它不需要特殊的小部件来访问您的数据。
移动端:来源:??mobx??
Observables、Actions、Reactions——这 3 个是MobX的重要概念。它支持单向数据流,并专注于这个原则:
任何可以从应用程序状态派生的东西,都应该是。自动地。
这个状态管理库使状态管理变得更简单和可扩展。它允许开发人员在任何 UI 框架之外管理应用程序状态。它旨在通过被动检测所有更改并将其传播到所需的 UI 来使状态管理变得超级简单。它会自动跟踪正在使用/消耗的内容,称为 observables。反应完成了 MobX 的可观察对象、动作和反应循环。当 observables 属性发生变化时,所有反应都会重新运行并重建小部件。
关键特性: Reactions 自动跟踪 observables 中的所有变化,无需任何显式连接。作为开发人员,您无需考虑如何使 UI 和数据保持同步。
Riverpod :Riverpod 类似于 Provider。提供者是一个对象,它包装了一段状态并允许监听该状态。
它是 Provider 的即兴版本,旨在克服 Provider 的常见问题。它通过单向数据流确保更好的性能、可测试性和可读性。它在编译时捕获编程错误,使开发人员免于运行时异常。此外,Riverpod 消除了对 Provider 所需的 BuildContext 的依赖。
它比提供者更灵活、可扩展、可测试和更简化。
GetX:根据官方文档,GetX 是一个超轻量级且功能强大的 Flutter 状态管理解决方案。它以更实用、更快捷的方式结合了路由管理、状态管理、导航和智能依赖注入。
GetX 提供了视图、表示逻辑、依赖注入和业务逻辑的完全解耦。它是使用 Flutter 构建应用程序的最简单、实用、安全和可扩展的方式。它提供了广泛的 API 和功能,让开发人员可以轻松快捷地构建应用程序。它使用其依赖注入功能,使应用程序开发更容易,因为您不需要依赖上下文或路由或小部件树。
Flutter 状态管理:使用什么以及何时使用?没有明确的方法来决定使用什么以及何时使用。选择状态管理技术取决于应用程序和开发人员。每种技术都有其优点和缺点以及执行任务的不同方式。
Flutter 社区在不断发展,我们目睹了这个由 Google 提供支持的 Flutter 的惊人增长,定期更新、增加的用户群和许多改进。随着时间的推移,很多东西会被改进,很多东西会被弃用。有一件事是肯定的——Flutter 的增长是因为它能够使用单个代码库为 Web、移动和桌面创建快速且有吸引力的用户体验。

    推荐阅读