如何防止 SwiftUI 在 ForEach 循环中重新初始化 Initialized-View？

Question

我有一个按钮，可以将 CircleInfo 类型的新对象添加到一个名为 circleArray 的数组中！这个数组将用于为 ForEach 循环提供数据，除了我注意到的一个大问题外，所有的都在工作！

问题：当我将新对象添加到数组时，更新数组的动作也使 ForEach 更新自身，它使应用程序和内存以比简单的 Circle，因为它再次开始 Re-Initializing Initialized-View！例如我们在屏幕中有 10 个圆，只要我添加新的圆，Foreach 就会渲染所有渲染的 10 个圆加上新的圆！ 也许你说这是 SwiftUI 的工作方式，它以微小的变化来绘制屏幕，​​但我告诉你，随着越来越多的数据它会吃掉这么多内存和 CPU！

我的目标：我想找到一种将新对象添加到屏幕的新方法，更有可能是过度添加或类似那些不需要 ForEach 的东西！因为只要我们改变数组的项或数组的范围，它就会再次绘制！

struct CircleInfo: Identifiable {

    let id: UUID = UUID()
    let circleColor: Color = Color(red: Double.random(in: 0...1), green: Double.random(in: 0...1), blue: Double.random(in: 0...1))

}

---

    struct CircleView: View {

    let circleInfo: CircleInfo
    let index: Int

    init(circleInfo: CircleInfo, index: Int) {

        self.circleInfo = circleInfo
        self.index = index
        
        print("initializing circle:", index)
    }

    var body: some View {

        Circle()
            .fill(circleInfo.circleColor)
            .frame(width: 200, height: 200, alignment: .center)
        
    }
    
}

---

    struct ContentView: View {

    @State var circleArray: [CircleInfo] = [CircleInfo]()

    var body: some View {

        GeometryReader { geometry in

            Color
                .yellow
                .ignoresSafeArea()

            ForEach(Array(circleArray.enumerated()), id:\.element.id) { (index, item) in

                CircleView(circleInfo: item, index: index)
                    .position(x: geometry.size.width/2, y: 20*CGFloat(index) + 100)
                
            }
 
        }
        .overlay(button, alignment: Alignment.bottom)
  
    }

    var button: some View {

        Button("add Circle") { circleArray.append(CircleInfo()) }
  
    }
 
}

Answer 1

实现目标的最简单方法是使用 CircleView 数组而不是 CircleInfo。

首先使CircleView可识别：

struct CircleView: View, Identifiable {

    let id: UUID = UUID()
…

然后在ForEach中使用CircleView数组

struct ContentView: View {

    @State var circleArray: [CircleView] = [CircleView]()

    var body: some View {

        GeometryReader { geometry in

            Color
                .yellow
                .ignoresSafeArea()

                ForEach(circleArray) { item in
                    item
                        .position(x: geometry.size.width/2, y: 20*CGFloat(item.index) + 100)

            }

        }
        .overlay(button, alignment: Alignment.bottom)

    }

    var button: some View {

        Button("add Circle") { circleArray.append(CircleView(circleInfo: CircleInfo(), index: circleArray.count)) }

    }

}

你肯定会少用 CPU。