swift - 更新属性包装器(如 @StateObject)会影响不使用该属性的其他 View 渲染

Question

当使用与 View 更新关联的不同属性包装器时，一处的更改会影响不使用该属性的 View 的呈现。

struct ContentView: View {

    @StateObject var viewModel = MyViewModel()
    @State var thirdTitle = "thirdTitle"

    var body: some View {
        VStack {
            Text(viewModel.firstTitle)
                .background(.random)
            Text(viewModel.secondTitle)
                .background(.random)
            Text(thirdTitle)
                .background(.random)

            Button("Change First Title") {
                viewModel.chageFirstTitle()
            }
        }
    }
}

class MyViewModel: ObservableObject {
    
    @Published var firstTitle = "firstTitle"
    @Published var secondTitle = "secondTitle"
    
    func chageFirstTitle() {
        firstTitle = "hello world"
    }
}

我明白 Text 的原因暴露viewModel.secondTitle重新渲染是因为@StateObject varviewModel = MyViewModel()当 `viewModel.firstTitle 改变时，依赖关系也改变了。

但是，我不知道为什么Text使用@State var thirdTitle = "thirdTitle"也被重新渲染。在 WWDC21 session 中 Demystify SwiftUI ，我看到只有根据依赖关系图更新相关依赖关系时， View 才会重新渲染。但是，即使thirdTitle与 viewModel 的更改无关，第三Text使用该依赖项将重新渲染并更改背景颜色。

更令人困惑的是，如果我将第三个Text分开进入单独的 View ( ThirdView ) 并接收 thirdTitle使用@Binding ，背景颜色没有改变，因为当时没有重新渲染。

struct ContentView: View {

    @StateObject var viewModel = MyViewModel()
    @State var thirdTitle = "thirdTitle"

    var body: some View {
        VStack {
            Text(viewModel.firstTitle)
                .background(.random)
            Text(viewModel.secondTitle)
                .background(.random)
            ThirdView(text: $thirdTitle)
                .background(.random)

            Button("Change First Title") {
                viewModel.chageFirstTitle()
            }
        }
    }
}

struct ThirdView: View {
    
    @Binding var text: String
    
    var body: some View {
        Text(text)
            .background(.random)
    }
}

关于我解释的情况，你能帮我了解一下 View 的渲染条件吗？

Answer 1

要渲染 SwiftUI，需要调用 View 的 body 属性(它是可计算的，即完全在调用时执行)。每当任何 View 依赖项(即动态属性)发生更改时都会执行此调用。

因此，viewModel.chageFirstTitle() 更改了 ContentView 的依赖关系，并且 ContentView.body 被调用，并且其中的每个基元都被渲染。 ThirdView 也创建了，但只要它的依赖关系没有改变，它的 body 就不会被调用，所以内容不会重新渲染。