美文网首页
SwiftUI 中的 @State、@StateObject、@

SwiftUI 中的 @State、@StateObject、@

作者: 猴子的饼干 | 来源:发表于2024-01-22 14:40 被阅读0次

    阅读难度: 入门

    // @State
    @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
    @frozen @propertyWrapper public struct State<Value> : DynamicProperty{
        //...
    }
    
    // @StateObject
    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
    @frozen @propertyWrapper public struct StateObject<ObjectType> : DynamicProperty where ObjectType : ObservableObject {
        //...
    }
    
    // @ObservedObject
    @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
    @propertyWrapper @frozen public struct ObservedObject<ObjectType> : DynamicProperty where ObjectType : ObservableObject {
        //...
    }
    

    从声明上可以看出, 三者都是基于 DynamicProperty 协议的属性包装器:

    public protocol DynamicProperty {
        mutating func update()
    }
    

    该协议仅一个 update() 方法, 其主要用来更新stored value(可理解为属性包装器的属性值wrappedValue), SwiftUI 的视图 View 会在绘制前调用该方法确保值为最新.

    差别在于 @StateObject@ObservedObject 都被限制为只能作用于符合 ObservableObject 协议的类型:

    public protocol ObservableObject : AnyObject {
        // 当对象发生改变之前的发布器
        associatedtype ObjectWillChangePublisher : PublisherPublisher = , ObservableObjectPublisher where Self.ObjectWillChangePublisher.Failure == Never
        // 发布器
        var objectWillChange: Self.ObjectWillChangePublisher { get }
    }
    
    extension ObservableObject where Self.ObjectWillChangePublisher == ObservableObjectPublisher {
        // 在扩展中实现了发布器
        public var objectWillChange: ObservableObjectPublisher { get }
    }
    
    

    由上可知 ObservableObject 只能作用于 AnyObject , 即 Class. 其定义了一个用来监听值即将发生改变的发布器, 在协议扩展中实现为ObservableObjectPublisher. 发布器为 Combine 的概念, 可参阅官方文档或旧文

    @StateObject@ObservedObject 都遵循 ObservableObject协议 从声明上看不出什么区别, 如果真的差不多, 也不需要声明两个一样的属性包装器, 那么这两者差别在哪里? 通过一个例子来看看:

    final class CounterViewModel: ObservableObject {
        @Published var count = 0
    }
    
    struct ContentView: View {
        @StateObject var outterStateObject = CounterViewModel()
        @ObservedObject var outterObservedObject = CounterViewModel()
        
        var body: some View {
            VStack {
                Text("OutStateObject is: \(outterStateObject.count)")
                Button("OutStateObject Counter") {
                    outterStateObject.count += 1
                }
                
                Text("OutObservedObject is: \(outterObservedObject.count)")
                Button("OutObservedObject Counter") {
                    outterObservedObject.count += 1
                }
                
                SubContentView()
                    .background(.blue)
                
            }
        }
    }
    
    struct SubContentView: View {
        @StateObject var soSubValue = CounterViewModel()
        @ObservedObject var ooSubValue = CounterViewModel()
        
        var body: some View {
            VStack {
                VStack {
                    Text("StateObject Count is: \(soSubValue.count)")
                    Button("StateObject Counter") {
                        soSubValue.count += 1
                    }
                }
                VStack {
                    Text("ObservedObject Count is: \(ooSubValue.count)")
                    Button("ObservedObject Counter") {
                        ooSubValue.count += 1
                    }
                }
            }
        }
    }
    

    上面的视图有内外两层, 内外层均持有了 @StateObject 和 @ObservedObject 的引用对象. 点击对应的按钮更改相关对象的 count 值会自动刷新视图.

    当外层视图刷新时, 内层使用 @ObservedObject 持有的对象会被重置:

    演示

    通过对 SubContentView 断点可以发现, 每次SubContentView刷新时, 被 @StateObject 修饰的 soSubValue 对象的地址始终不变, 而被 @ObservedObject 修饰的 ooSubValue 每次都会被重置. 由此可知:

    在SwiftUI中, @StateObject 与 @ObservedObject 在持有状态对象的生命周期管理上存在差异

    更详细的内容可参考官方文档中对 @StateObject@ObservedObject 的描述. 简化一下可以总结为:

    @StateObject: 视图层次中引用类型的状态对象的唯一来源, 视图在其生命周期内只会生成一次该状态对象.
    @ObservedObject: 持有外部传入的符合 ObservableObject 的状态类型, 用于在视图之间共享状态对象


    回到 @State , 其并没有受限于 ObservableObject 协议, 也因为不遵循 ObservableObject 协议,缺少了 objectWillChange 发布器. 意味着当使用 @State 持有引用类型时, 无法自动触发 SwiftUI 的重绘, 例如以下代码:

    struct ValueModel {
        var count = 0
    }
    
    class ClassModel {
        var count = 0
    }
    
    struct ContentView: View {
        @State var outterValueState = ValueModel()
        @State var outterClassState = ClassModel()
        
        var body: some View {
            VStack {
                Text("OutValueState is: \(outterValueState.count)")
                Button("OutValueState Counter") {
                    outterValueState.count += 1
                }
                
                Text("OutClassState is: \(outterClassState.count)")
                Button("OutValueState Counter") {
                    outterClassState.count += 1
                }
                
                SubContentView()
                    .background(.blue)
            }
        }
    }
    
    struct SubContentView: View {
        @State var valueState = ValueModel()
        @State var classState = ClassModel()
        
        var body: some View {
            VStack {
                Text("ValueState is: \(valueState.count)")
                Button("ValueState Counter") {
                    valueState.count += 1
                }
                
                Text("ClassState is: \(classState.count)")
                Button("ClassState Counter") {
                    classState.count += 1
                }
            }
        }
    }
    

    当值类型 ValueModel 变化时, SwiftUI 触发了更新, 而引用类型的 ClassModel 不会更新.

    在 iOS 17 以前, 引用类型使用 @StateObject 修饰, iOS17 开始, 苹果提供了可将自定义类型转变为支持 Observable 协议的宏: @Observable.

    Tips: 单独使用 Observable 协议并不会为相应类型添加观察功能, 对需支持观察功能的类型始终使用 @Observable 宏来修饰, 省去了 ObservableObject、 @Publisher 一类的样板代码, 也使业务代码更加简洁. 更多 iOS17 的可观查类型的适配可查看官方文档

    上面的代码给 ClassModel 添加 @Observable 宏即可触发 SwiftUI 的刷新.

    @Observable
    class ClassModel {
        var count = 0
    }
    

    总结

    @State 与 @StateObject 均表示状态数据的唯一来源, 即真实持有数据. 不同的是 @State 不限制类型, 而 @StateObject 仅可用来修饰引用类型. 且在视图声明周期内仅会声明一次. 而 @ObservedObject 被用来在视图间共享引用状态对象, 每次视图更新时均会重置, 不能用来持有状态数据, 即状态数据的唯一来源. 而从 iOS17 开始, 官方推荐使用 @Observable + @State + @Binding 的组合来实现 SwiftUI 中可观察数据的双向绑定.

    相关文章

      网友评论

          本文标题:SwiftUI 中的 @State、@StateObject、@

          本文链接:https://www.haomeiwen.com/subject/mlurodtx.html