面试题：SwiftUI 视图的 `@State` 和 `@Binding` 在生命周期管理中的作用及区别

Question

在 SwiftUI 开发中，`@State` 和 `@Binding` 是常用的属性包装器。请详细解释它们在视图生命周期管理方面的作用，比如在视图创建、更新和销毁过程中，它们如何影响数据的存储、传递和视图的重绘。另外，深入分析 `@State` 和 `@Binding` 之间的区别，包括它们的适用场景、数据绑定机制以及对视图状态管理的影响，可通过实际代码示例进行说明。

Answer 1

@State

1. 视图生命周期管理中的作用
   • 视图创建：@State 用于在视图内部创建一个可变状态。当视图创建时，@State 修饰的属性会被初始化。例如：

struct ContentView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

这里在 ContentView 创建时，count 被初始化为 0。

• 视图更新：当 @State 修饰的状态值发生变化时，SwiftUI 会自动检测到这种变化，并触发视图的重绘。在上述例子中，每次点击按钮，count 增加，视图会重新绘制以显示新的 count 值。
• 视图销毁：当视图从视图层级中移除时，与之关联的 @State 所管理的状态也会被销毁。

2. 适用场景
   • 当视图需要自己独立管理一些可变状态时，使用 @State。比如一个计数器、一个开关的状态等，这些状态只在当前视图内部有意义，不需要与其他视图共享。
3. 数据绑定机制
   • @State 是单向绑定的。视图可以读取和修改 @State 修饰的状态，但其他视图无法直接访问或修改这个状态。它主要用于管理视图内部的局部状态。

@Binding

1. 视图生命周期管理中的作用
   • 视图创建：@Binding 用于引入外部状态到视图中。它本身并不创建状态，而是提供对外部状态的引用。例如：

struct ParentView: View {
    @State private var name = ""
    var body: some View {
        VStack {
            ChildView(name: $name)
            Text("Parent: \(name)")
        }
    }
}

struct ChildView: View {
    @Binding var name: String
    var body: some View {
        TextField("Enter name", text: $name)
    }
}

在 ChildView 创建时，它通过 @Binding 引用了 ParentView 中的 name 状态。

• 视图更新：对 @Binding 修饰的属性的任何修改，都会反映到它所绑定的外部状态上，进而可能触发依赖于该外部状态的其他视图的更新。在上述例子中，在 ChildView 的 TextField 中输入内容，会更新 ParentView 中的 name，并导致 ParentView 重绘。
• 视图销毁：当视图销毁时，@Binding 本身不销毁所绑定的状态，因为状态是在外部管理的。

2. 适用场景
   • 当视图需要与其他视图共享状态，或者需要修改外部传递进来的状态时，使用 @Binding。比如子视图需要更新父视图的某个状态，或者多个视图需要共享同一个状态。
3. 数据绑定机制
   • @Binding 是双向绑定的。视图不仅可以读取 @Binding 修饰的状态，还可以修改它，并且这种修改会同步到绑定的源数据。

区别总结

1. 状态创建：@State 创建并管理视图内部的状态，而 @Binding 只是引用外部状态。
2. 数据绑定方向：@State 是单向绑定，主要服务于视图内部状态管理；@Binding 是双向绑定，用于视图间状态共享和交互。
3. 适用场景：@State 用于视图自身独立的状态管理，@Binding 用于跨视图的状态传递和共享。