SwiftUI中Timer每秒更新@State导致子视图重复实例化如何解决？

问题场景 #

当前实现的TimerView中，子视图ReportView会每秒被实例化一次，不符合预期。原代码如下：

TimerView 代码 #

struct TimerView: View {
    @State private var numberOfVideos: Int
    @State private var time = ""
    private let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    init(numberOfVideos: Int) {
        _numberOfVideos = State(initialValue: numberOfVideos)
    }

    var body: some View {
        Text(time)
            .onReceive(timer) { _ in
                // 每秒触发一次
                time = "00:00"
            }
        ReportView(numberOfVideos: $numberOfVideos)
    }
}

ReportView 代码 #

struct ReportView: View {
    @Binding private var numberOfVideos: Int
    init(numberOfVideos: Binding<Int>) {
        // ❌ 每秒都会被调用
        self._numberOfVideos = numberOfVideos
    }

    var body: some View {
        Text(String(numberOfVideos))
    }
}

使用方式 #

TimerView(numberOfVideos: 5)

问题原因 #

Timer每秒触发时会给@State变量time赋值，导致TimerView的body重新计算，进而重新创建所有子视图实例，包括ReportView。

修复方案 #

方案1：将计时器逻辑抽离到ViewModel #

通过ObservableObject管理计时器状态，避免视图层的@State变量频繁更新触发整个视图重建：

class TimerViewModel: ObservableObject {
    @Published var time = ""
    private let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
    
    init() {
        _ = timer.sink { [weak self] _ in
            // 替换为实际的时间计算逻辑
            let newTime = "00:00"
            self?.time = newTime
        }
    }
}

struct TimerView: View {
    @State private var numberOfVideos: Int
    @StateObject private var viewModel = TimerViewModel()

    init(numberOfVideos: Int) {
        _numberOfVideos = State(initialValue: numberOfVideos)
    }

    var body: some View {
        Text(viewModel.time)
        ReportView(numberOfVideos: $numberOfVideos)
    }
}

struct ReportView: View {
    @Binding private var numberOfVideos: Int
    
    init(numberOfVideos: Binding<Int>) {
        self._numberOfVideos = numberOfVideos
    }

    var body: some View {
        Text(String(numberOfVideos))
    }
}

方案2：让ReportView遵循Equatable #

通过实现Equatable协议，让SwiftUI仅在绑定的numberOfVideos变化时才更新ReportView：

struct ReportView: View, Equatable {
    @Binding private var numberOfVideos: Int
    
    init(numberOfVideos: Binding<Int>) {
        self._numberOfVideos = numberOfVideos
    }

    var body: some View {
        Text(String(numberOfVideos))
    }
    
    static func == (lhs: ReportView, rhs: ReportView) -> Bool {
        lhs.numberOfVideos == rhs.numberOfVideos
    }
}

// 在TimerView的body中调用时添加.equatable()
struct TimerView: View {
    // ... 原有代码不变
    var body: some View {
        Text(time)
            .onReceive(timer) { _ in
                time = "00:00"
            }
        ReportView(numberOfVideos: $numberOfVideos)
            .equatable()
    }
}

方案3：优化time的赋值逻辑 #

仅当time的实际值发生变化时才赋值，避免不必要的视图刷新：

struct TimerView: View {
    // ... 原有代码不变
    var body: some View {
        Text(time)
            .onReceive(timer) { _ in
                let newTime = "00:00" // 替换为动态计算的时间
                if time != newTime {
                    time = newTime
                }
            }
        ReportView(numberOfVideos: $numberOfVideos)
    }
}

方案选择建议 #

• 如果计时器逻辑复杂，推荐使用方案1，将业务逻辑与视图分离，符合MVVM架构规范。
• 如果只是快速阻止子视图重复实例化，且子视图依赖的状态较少，推荐使用方案2。
• 如果time的更新确实存在冗余，方案3是最轻量化的修复方式。

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