SwiftUI 开发当中的状态管理

好久没有更新技术文档了，一直在写新项目没有时间更新。最近项目也是接近尾声了，得以有时间写个技术文档，写得不是很深入，当一个简单的记录吧～

1. 为什么在 SwiftUI 中要用到状态管理

在 SwiftUI 中，状态管理是构建动态和响应式用户界面的基础。SwiftUI 采用声明式编程风格，与传统的命令式编程相比，它关注的是“显示什么”，而不是“如何去做”。这就需要有效的状态管理，以确保视图的状态与显示内容之间的一致性。以下是使用状态管理的几个主要原因：

  • 动态更新：用户界面需要实时反映数据的变化。例如，用户点击按钮增加计数，界面应及时更新显示新的计数值。通过状态管理，SwiftUI 可以自动监测状态变化并更新相应的视图。

  • 数据驱动：SwiftUI 中的视图是数据驱动的，状态管理使得数据与视图之间的绑定变得简单且直观。开发者只需专注于数据变化，而 SwiftUI 会处理视图的更新。

  • 提高可维护性：通过清晰的状态管理，开发者能够更轻松地理解和维护代码。与传统 UIKit 相比，SwiftUI 减少了大量的状态处理逻辑，使得代码更简洁。

2. SwiftUI 中状态管理的形式

SwiftUI 提供了多种状态管理机制，适应不同需求的场景：

2.1 @State

使用场景：@State 适用于视图内部的局部状态，通常用于简单的状态，比如单个视图的切换、计数器等。

示例：

swift
 代码解读
复制代码
import SwiftUI

struct CounterView: View {
    @State private var count = 0 // 定义局部状态

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
            Button(action: {
                count += 1 // 更新状态
            }) {
                Text("Increment")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
    }
}

在这个示例中，CounterView 使用 @State 来管理计数的状态。当用户点击按钮时，count 的值增加，界面也随之更新。

2.2 @Binding

使用场景：@Binding 用于在父视图和子视图之间共享状态。适合需要从子视图修改父视图状态的情况。

示例：

swift
 代码解读
复制代码
import SwiftUI

struct ParentView: View {
    @State private var parentCount = 0 // 父视图的状态

    var body: some View {
        VStack {
            Text("Parent Count: \(parentCount)")
                .font(.largeTitle)
            // 将父视图的状态通过绑定传递给子视图
            CounterView(count: $parentCount) 
        }
        .padding()
    }
}

struct CounterView: View {
    @Binding var count: Int // 绑定父视图的状态

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
            Button(action: {
                count += 1 // 修改绑定的状态
            }) {
                Text("Increment")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
    }
}

在这个例子中，ParentView 使用 @State 来管理计数，而 CounterView 通过 @Binding 接收这个计数并允许其修改。如此，父视图和子视图之间的状态可以保持同步。

2.3 @ObservedObject

使用场景：@ObservedObject 用于观察外部对象的状态，适合需要在多个视图间共享状态的复杂场景。例如，网络请求结果、用户信息等。

示例：

swift
 代码解读
复制代码
import SwiftUI
import Combine

class CounterModel: ObservableObject {
    @Published var count: Int = 0 // 被观察的属性

    func increment() {
        count += 1 // 修改属性将通知观察者
    }
}

struct ContentView: View {
    @ObservedObject var model = CounterModel() // 观察模型

    var body: some View {
        VStack {
            Text("Count: \(model.count)")
                .font(.largeTitle)
            Button(action: {
                model.increment() // 触发状态变化
            }) {
                Text("Increment")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
    }
}

在这个示例中，CounterModel 是一个符合 ObservableObject 协议的类，ContentView 通过 @ObservedObject 观察 CounterModel 的实例。当 count 变化时，界面会自动更新。

2.4 @StateObject

使用场景：@StateObject 用于在视图内部创建和管理 ObservableObject 的实例，适合将状态和视图紧密结合的场景。

示例：

swift
 代码解读
复制代码
import SwiftUI

class TimerModel: ObservableObject {
    @Published var time: Int = 0

    func startTimer() {
        // 模拟定时器逻辑
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
            self.time += 1 // 每秒增加
        }
    }
}

struct TimerView: View {
    @StateObject private var timerModel = TimerModel() // 创建状态对象

    var body: some View {
        VStack {
            Text("Time: \(timerModel.time)")
                .font(.largeTitle)
            Button("Start Timer") {
                timerModel.startTimer() // 启动计时器
            }
        }
        .onAppear {
            timerModel.startTimer() // 视图出现时启动计时器
        }
    }
}

在这个示例中，@StateObject 用于在 TimerView 中创建 TimerModel 的实例。TimerModel 管理着计时的逻辑，并在定时器触发时更新状态。

2.5 @EnvironmentObject

使用场景：@EnvironmentObject 用于在多个层次的视图中共享状态，适合全局状态管理的情况，如应用设置、用户信息等。

示例：

swift
 代码解读
复制代码
import SwiftUI

class UserSettings: ObservableObject {
    @Published var username: String = "Guest"
}

struct ContentView: View {
    @StateObject var settings = UserSettings() // 创建全局设置

    var body: some View {
        VStack {
            Text("Username: \(settings.username)")
                .font(.largeTitle)
            UsernameEditor()
                .environmentObject(settings) // 传递环境对象
        }
    }
}

struct UsernameEditor: View {
    @EnvironmentObject var settings: UserSettings // 从环境中获取设置

    var body: some View {
        TextField("Enter username", text: $settings.username)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

在这个示例中，UserSettings 是一个全局状态对象，ContentView 创建并传递给子视图 UsernameEditor。子视图能够直接访问和修改全局状态。

3. 从底层分析 SwiftUI 中状态管理的原理及逻辑

SwiftUI 的状态管理依赖于响应式编程模型和高效的视图更新机制。以下是其核心原理和实现逻辑的详细分析：

3.1 响应式编程模型

SwiftUI 使用一种响应式编程模型，使得视图与状态之间的关系变得清晰：

  • 状态变更：当状态（如 @State 或 @ObservableObject 的属性）发生变化时，SwiftUI 会立即知道需要重新渲染与该状态相关的视图。

  • 视图的更新：SwiftUI 在内部维护着一个视图树结构，当状态变化时，它会通过 diffing 算法比较新旧视图，并仅更新发生变化的部分。这种策略大大提高了性能，避免了不必要的重绘。

3.2 实现逻辑

以下是 SwiftUI 状态管理的核心实现逻辑示例，说明其底层是如何处理状态变化的：

swift
 代码解读
复制代码
import Combine

// 观察对象协议
class MyModel: ObservableObject {
    @Published var value: Int = 0 // 被观察的属性

    func increment() {
        value += 1 // 更改属性将通知观察者
    }
}

// 视图结构
struct ContentView: View {
    @ObservedObject var model = MyModel() // 观察模型

    var body: some View {
        VStack {
            Text("Value: \(model.value)")
            Button("Increment") {
                model.increment() // 触发状态变化
            }
        }
    }
}

// 在底层，SwiftUI 通过 Combine 的发布者-订阅者模式实现状态管理
// 这里是一个简化的实现逻辑

protocol ObservableObject {
    var objectWillChange: AnyPublisher<Void, Never> { get }
}

@propertyWrapper
struct Published<Value> {
    var wrappedValue: Value {
        didSet {
            objectWillChange.send()
        }
    }
    let objectWillChange: AnyPublisher<Void, Never>
}

// 视图更新逻辑
extension View {
    func onReceive<Object: ObservableObject>(_ object: Object, perform action: @escaping () -> Void) {
        object.objectWillChange
            .sink { _ in
                action() // 状态变化时调用视图更新
            }
            .store(in: &cancellables)
    }
}

代码说明

  • ObservableObject 协议：MyModel 类实现了 ObservableObject 协议，表示它是一个可观察的对象。

  • @Published：当 value 属性改变时，通过 @Published 修饰符通知所有观察者，导致绑定到该属性的视图自动更新。

  • @ObservedObject：ContentView 中通过 @ObservedObject 观察 MyModel 的实例。当 model.value 变化时，SwiftUI 会自动重新渲染 ContentView。

  • Combine 框架的应用：SwiftUI 使用 Combine 框架的发布者-订阅者模式来处理状态变化，确保在状态变化时能够及时地通知到所有的观察者。

4. 总结

状态管理在 SwiftUI 开发中至关重要，提供了实现动态响应用户交互和数据变化的机制。通过使用 @State、@Binding、@ObservedObject 等状态管理工具，开发者能够构建清晰、易于维护的代码。同时，SwiftUI 的底层实现结合了响应式编程模型和 Combine 框架，使得状态变化能够高效地反映到用户界面。掌握这些概念和实践，将使开发者能够更好地利用 SwiftUI 构建现代化、流畅的 iOS 应用。

注：本文转载自juejin.cn的稻城亚丁有沉香的文章"https://juejin.cn/post/7447749020837855258"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！