Flutter Fish Redux 2.0 架构演进实践
2024-01-15 12:40:06
闲鱼技术团队基于Fish-Redux现有框架做了一次新一轮的架构演进，通过对现有适配器能力的升级，进一步提高了架构的灵活性。本次演进，我们主要做了如下的改动：
一、组件化极致实践
在组件化架构模式兴起之初，组件化主要用来拆分和复用一些通用功能模块。而在 2.0 版本中，我们进行了一次更为极致的组件化实践：通用功能模块还是组件，业务模块也是组件，甚至同一业务组件内的不同页面也是组件，不同的组件之间通过事件进行通信，由此形成一个更加灵活高效的组件化架构。
二、单组件多页面与容器组件的优化
1、单组件多页面
由于业务页面往往是一个复杂结构，从通信设计到页面布局，都无法简单地复用，于是Fish-Redux 2.0 引入了单组件多页面的概念，这种模式下，每个业务页面作为组件存在，并可以由一个组件连接多个子组件，整个组件树看起来就像是：
ComponentA
├─ComponentB
└─ComponentC
这样一来，子组件之间的复用将会变得非常简单。
2、容器组件
一个典型的业务组件通常包括三个组成部分：容器组件、业务逻辑和页面。
容器组件负责连接业务逻辑和页面，承担着事件转发、页面生命周期管理、页面状态管理等任务，对页面进行管理。而页面则直接调用组件方法来进行通信，流程图如下：
+--------------+
| |
+------+ +------+
| | | |
+---+ Component +---+ +---+
| |------------> | | | |
+---+ +---+ +---+
| | |
+------+ +------+ +------+
| | | | | |
+--------+ Method +--------+ +--------+
| |----------->| | | |
+--------+ +--------+ +--------+
| | |
+------+ +------+ +------+
| | | | | |
+---+ Props +---+ +---+ +---+
| |------------> | | | |
+---+ +---+ +---+
| | |
+------+ +------+ +------+
| | | | | |
+--------+ Page +--------+ +--------+
| |----------->| | | |
+--------+ +--------+ +--------+
容器组件和业务逻辑之间的交互也是通过事件的形式完成的，你可以很容易地想到，这样一个结构可以提高容器组件的复用性，当需要构建一个新页面的时候，只需编写一个容器组件来连接对应的页面即可。
三、更强的代码复用能力
在 Fish-Redux 1.0 中，我们使用了一个轻量的声明式 Router 去管理页面之间的路由关系，好处是简单灵活，缺点是代码复用能力较弱，尤其在多组件通信的场景下，经常会遇到类似的代码重复的问题。
为了解决这个问题，在 Fish-Redux 2.0 中，我们开发了一个全新的动态 Router，通过使用反射机制动态注册和实例化组件，实现代码复用，由此，代码组织结构更清晰，逻辑也更清晰，编写多组件之间的通信代码不再是难题。
四、生命周期劫持优化
为了能够在组件被回收前做一些收尾工作，Fish-Redux 1.0 提供了组件生命周期劫持的功能，但是这个功能非常鸡肋，原因在于它劫持的时机太晚了，当组件被回收时才进行劫持，这显然达不到预期的目的。
在 Fish-Redux 2.0 中，我们对生命周期劫持功能进行了优化，由原来的组件被回收前劫持，变为组件销毁前劫持，这样一来，就可以利用这个功能在组件销毁前做一些收尾工作，比如销毁子组件、取消网络请求等。
五、组件状态持久化
在 Fish-Redux 2.0 中，我们引入了组件状态持久化的概念，通过状态管理类，可以非常方便地对组件的状态进行持久化操作，包括保存和加载。
总结
Fish-Redux 2.0 是一次架构演进的重要成果，它在组件化、复用性、生命周期劫持等方面进行了优化，并引入了全新的动态 Router 和组件状态持久化功能，这些改动使得 Fish-Redux 2.0 变得更加灵活高效。我们相信，Fish-Redux 2.0 将会成为开发者构建高质量 Flutter 应用的利器。
点击链接了解 Fish-Redux 2.0 的更多内容：
