如何防止SwiftUI懒加载集合中条件子视图过度重新计算？

在SwiftUI中，ScrollView嵌套LazyHStack的组合下，子视图默认只有进入屏幕范围，或者绑定的底层状态发生变化时才会重新计算。但如果子视图的body里包含条件判断语句，这个懒加载优化会失效：当底层状态变化时，所有曾经显示过的子视图（哪怕已经移出屏幕）都会被重新计算。

问题复现步骤 #

• 取消注释示例代码中This will cause unnecessary re-evaluation下方的代码，运行Playground
• 滚动浏览部分子视图后，点击Mutate collection按钮，会看到所有曾显示过的子项都打印Evaluating (n)，哪怕它们已经不在屏幕上
• 注释上述代码，取消注释This is fine下方的简单Text视图，重新运行
• 重复第二步操作，此时只有屏幕附近的子视图会打印日志，符合懒加载的预期行为

复现代码 #

struct ChildView: View {
    let s: String
    var body: some View {

        // 会引发不必要重计算的代码
        // if #available(iOS 16, *) {
        //     Text(s)
        //         .draggable("test")
        // } else {
        //     Text(s)
        // }

        // 正常的懒加载行为
        // Text(s)
    }
}

struct ParentView: View {
    @State private var items = Array(0...100)
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(items, id: \.self) { n in
                    let _ = print("Evaluating \(n)")
                    ChildView(s: "Num \(n)")
                }
            }
        }
        Button("Mutate collection") {
            items[0] = Int.random(in: 0...100)
        }
        .frame(width: 200, height: 500)
    }
}

PlaygroundPage.current.setLiveView(ParentView())

问题成因 #

SwiftUI的懒加载容器（比如LazyHStack）会缓存已经渲染过的视图，以此来优化性能。但当子视图的body包含条件分支时，不同分支返回的视图类型可能存在差异（比如示例中带.draggable的Text是ModifiedContent<Text, DraggableModifier>类型，和原始Text并非同一类型）。这种类型不一致会导致SwiftUI无法正确识别并复用缓存的视图，只能重新计算所有曾经加载过的子视图。

解决方法 #

核心思路是让子视图的body始终返回单一类型的视图，确保SwiftUI可以正确缓存和复用。

方法一：将条件逻辑封装到独立子视图 #

把版本判断的逻辑抽离到一个单独的视图中，让ChildView的body始终返回同一个类型的视图：

struct VersionedDraggableText: View {
    let text: String
    
    var body: some View {
        if #available(iOS 16, *) {
            Text(text)
                .draggable("test")
        } else {
            Text(text)
        }
    }
}

struct ChildView: View {
    let s: String
    var body: some View {
        VersionedDraggableText(text: s)
    }
}

方法二：使用@ViewBuilder（仅作补充，不推荐） #

如果不想额外创建子视图，可以用@ViewBuilder修饰辅助方法，确保返回的视图类型统一：

struct ChildView: View {
    let s: String
    var body: some View {
        contentView
    }
    
    @ViewBuilder
    private var contentView: some View {
        if #available(iOS 16, *) {
            Text(s)
                .draggable("test")
        } else {
            Text(s)
        }
    }
}

这样修改后，再运行代码，点击按钮时就只有屏幕附近的子视图会重新计算，恢复懒加载的正常优化效果。

内容的提问来源于stack exchange，提问作者tenuki