MVI 架构详解

原创已于 2024-12-06 14:46:31 修改 · 808 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#架构 #mvi模式

于 2020-09-07 13:18:34 首次发布

MVI 架构详解

MVI（Model-View-Intent）是一种在现代前端开发中广泛使用的架构模式。它通过单向数据流、不可变状态和清晰的组件职责分工，为应用提供了强大的扩展性和可维护性。

1. 什么是 MVI 架构？

MVI 是一种简化复杂 UI 状态管理的架构，它的核心理念可以归纳为：

单向数据流：状态的变化从用户意图（Intent）开始，通过模型（Model）处理，最终反映在视图（View）上。
不可变状态：整个应用的状态以不可变对象的形式存储。
响应式编程：视图根据状态变化自动更新。

MVI 与其他架构的对比

特性	MVC	MVP	MVVM	MVI
数据流向	双向	双向	双向	单向
状态管理	模糊	较模糊	清晰	非常清晰
视图更新	手动	手动	数据绑定	状态驱动
学习曲线	简单	中等	中等	较高

2. MVI 的核心组成部分

UML 图

组成部分解析

Intent（用户意图）：
- 用户与应用的交互行为，比如点击按钮或滑动。
Model（数据模型）：
- 负责根据用户意图处理业务逻辑，并生成新的状态。
View（视图）：
- 负责渲染 UI，并监听用户意图。
State（状态）：
- 应用的单一真相来源，用于驱动 UI 更新。

3. MVI 数据流详解

以下是 MVI 数据流的具体流程：

数据流示意图

用户触发意图：
用户点击按钮触发事件，比如“加载数据”。
Intent 封装意图：
将用户的操作封装为可传递的意图对象。
Model 处理逻辑：
根据意图处理相关逻辑，并生成新的不可变状态。
State 更新：
状态对象发生改变，驱动视图重新渲染。
View 渲染：
根据状态变化更新 UI，使用户看到最新的界面。

4. 实现 MVI 架构的实例

下面以一个简单的“计数器”应用为例，演示如何实现 MVI 架构。

功能描述

点击“增加”按钮，计数器加 1。
点击“减少”按钮，计数器减 1。

实现代码

Intent 定义

sealed class CounterIntent {
    object Increment : CounterIntent()
    object Decrement : CounterIntent()
}

State 定义

data class CounterState(val count: Int)

Model 处理逻辑

class CounterModel {
    fun reduce(state: CounterState, intent: CounterIntent): CounterState {
        return when (intent) {
            is CounterIntent.Increment -> state.copy(count = state.count + 1)
            is CounterIntent.Decrement -> state.copy(count = state.count - 1)
        }
    }
}

View 渲染

fun render(state: CounterState) {
    println("当前计数：${state.count}")
}

流程示例

fun main() {
    val model = CounterModel()
    var state = CounterState(0)

    // 用户点击增加
    val incrementIntent = CounterIntent.Increment
    state = model.reduce(state, incrementIntent)
    render(state)

    // 用户点击减少
    val decrementIntent = CounterIntent.Decrement
    state = model.reduce(state, decrementIntent)
    render(state)
}