SwiftUI｜监测视图更新及更新原因

SwiftUI 的优势之一就是可以自动让 UI 和数据状态保持同步。频繁的视图更新也会带来一定的性能问题，尽管 Apple 已经让 SwiftUI 在更新时尽量只渲染视图树中必须重绘的部分，但我们还是需要知道某种可以监测视图更新以及触发其更新的原因的手段。这样我们才能在业务层面做一些针对性的性能优化。

我们可以通过在 View 的 body 视图构造器中插入一条 print 语句来监测到哪些视图的 body 正在被执行。这条语句还必须是一个赋值语句，不能是仅一个 print。因为 print 返回的是一个 Void ，而不是一个 View ，视图构造器会报错。

struct ContentView: View {
    var body: some View {
        let _ = print("ContentView Changed!")
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
    }
}

像上面这样，每次执行 body 内部的视图构造器的时候，都会输出 ContentView Changed!。

系统内部提供了一个 _printChanges 方法，可以输出视图被重新构建的原因。

struct ContentView: View {
    @State var count: Int = 1
    var body: some View {
        let _ = Self._printChanges()
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            Button("Count: \(count)") { 
                count += 1
            }
        }
    }
}

• 如果是视图的 identity 发生了变化，比如刚创建的视图被插入到了渲染树中，会输出 @identity。
• 如果是视图本身的值发生了变化，比如视图其中一个属性的值发生了变化，会输出 @self 。
• 如果是视图中的一个状态发生了变化，会输出这个状态对应的属性名（下划线样式）。

案例

使用下面代码做一个小 Demo：

struct ContentView: View {
    @State var count: Int = 1
    @State var text: String = ""
    var body: some View {
        let _ = Self._printChanges()
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            Button("Count: \(count)") { 
                count += 1
            }
            ChildView(text: $text)
            Button("Change Text") { 
                text = "abc"
            }
        }
    }
}

struct ChildView: View {
    let uuid: UUID = UUID()
    @Binding var text: String
    var body: some View {
        let _ = Self._printChanges()
        let _ = print(self.uuid)
        Text("ChildView text:" + text)
    }
}

Demo 刚启动时输出如下：

因为 ContentView 和 ChildView 都是新创建并且添加到渲染树中的，所以输出中都有 @identity 和 @self 。ContentView 的两个 State 属性都被赋了初始值，所以它们也被打印了出来。

点击 Count 按钮，ContentView 的 count 增加，触发了更新，打印了@count 。而这个操作也让 Count 按钮下面的 ChildView 被重新创建了，所以 ChildView 打印了 @self ，且 uuid 发生变化。

点击 Change Text 按钮，ContentView 的 text 属性发生变化。由于 text 属性和 ChildView 绑定在了一起，因此 ChildView 打印了 @text 。此时 uuid 没有变化，说明 ChildView 没有被重建，只是内部更新内部视图。text 属性本身和 ContentView 没有绑定关系，所以 text 变化不会触发 ContentView 更新。