多次调用 SwiftUI View init

Question

我对 SwiftUI 还是很陌生。我有一个非常简单的看法。它只是一个根视图，其中包含一个包装在 UIViewRepresentable 中的 WKWebView。我的问题是，打开视图时 UIViewRepresentable 的 init 方法被调用了 6 次。这意味着 WKWebView 被初始化了 6 次，并且我所有的初始化代码（设置 JS 回调，...）被调用了 6 次。我在根视图 MyWebView 和子视图 WebView（UIViewRepresentable）的初始化函数中添加了打印语句。根视图init只被调用一次，而子视图的init被调用6次。这是正常的吗？还是我做错了什么？

struct MyWebView：查看 {

@ObservedObject private var viewModel = WebViewModel()

init() {
    print("root init")
}

var body: some View {
        VStack(alignment: .leading, spacing: 0, content: {
            WebView(viewModel: viewModel)
        })
        .navigationBarTitle("\(viewModel.title)", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
} }

struct WebView: UIViewRepresentable {

var wkWebView: WKWebView!

init(viewModel: WebViewModel) {
    print("webview init")
    doWebViewInitialization(viewModel: viewModel)
}

func makeUIView(context: UIViewRepresentableContext<WebView>) -> WKWebView {
    let request = URLRequest(url: URL(string: "https://www.google.com")!, cachePolicy: .returnCacheDataElseLoad)
    wkWebView.load(request)

    return wkWebView
}

}

Answer 1

我没有收到您多次调用 UIViewRepresentable 的 init 方法的问题。 我稍微修改了您的 WebView，这就是我测试答案的方式：

import SwiftUI
import Foundation
import WebKit

@main
struct TestSApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            MyWebView()
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

// for testing
class WebViewModel: ObservableObject {
    @Published var title = ""
}

struct WebView: UIViewRepresentable {
    let wkWebView = WKWebView()
    
    init(viewModel: WebViewModel) {
        print("\n-----> webview init")
      //  doWebViewInitialization(viewModel: viewModel)
    }
    
    func makeUIView(context: UIViewRepresentableContext<WebView>) -> WKWebView {
        if let url = URL(string: "https://www.google.com") {
            let request = URLRequest(url: url, cachePolicy: .returnCacheDataElseLoad)
            wkWebView.load(request)
        }
        return wkWebView
    }
    
    func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<WebView>) { }
}

struct MyWebView: View {
    @ObservedObject private var viewModel = WebViewModel()
    
    init() {
        print("\n-----> root init")
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0, content: {
            WebView(viewModel: viewModel)
        })
            .navigationBarTitle("\(viewModel.title)", displayMode: .inline)
            .navigationBarBackButtonHidden(true)
    }
}

这会使“doWebViewInitialization”留下一个可能的问题点。

Answer 2

您必须在编写代码时假设 SwiftUI 中 View 的初始化程序将被多次调用。

在这种情况下，您在makeUIView(context:)中编写初始化过程。

见： https://developer.apple.com/documentation/swiftui/uiviewrepresentable/makeuiview(context:)

---

比如我基于this answer写了如下代码。我在这个引用的代码中添加了一个切换高度按钮。

-----> makeUIView 日志只输出一次， 但每次按下切换按钮时都会输出-----> webview init 日志。

import SwiftUI
import WebKit

struct ContentView: View {
  var body: some View {
    MyWebView()
  }
}

class WebViewModel: ObservableObject {
  @Published var title = ""
}

struct WebView: UIViewRepresentable {
  let wkWebView = WKWebView()

  init(viewModel: WebViewModel) {
    print("\n-----> webview init")
  }

  func makeUIView(context: UIViewRepresentableContext<WebView>) -> WKWebView {
    print("\n-----> makeUIView")
    if let url = URL(string: "https://www.google.com") {
      let request = URLRequest(url: url, cachePolicy: .returnCacheDataElseLoad)
      wkWebView.load(request)
    }
    
    return wkWebView
  }

  func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<WebView>) { }
}

struct MyWebView: View {
  @State private var toggleHight = false
  @ObservedObject private var viewModel = WebViewModel()

  init() {
    print("\n-----> root init")
  }

  var body: some View {
    VStack {
      WebView(
        viewModel: viewModel
      )
      .frame(
        height: { toggleHight ? 600 : 300 }()
      )

      Button(
        "toggle",
        action: {
          toggleHight.toggle()
        }
      )
    }
  }
}

---

此外，我在编写示例代码后意识到WebView: UIViewRepresentable 不应该有wkWebView 的实例变量。

请在makeUIView(context:) 中完成所有操作（创建实例和配置），如下所示。 这是因为每次调用初始化程序时都会重新创建实例变量。

import SwiftUI
import WebKit

struct ContentView: View {
  var body: some View {
    MyWebView()
  }
}

class WebViewModel: ObservableObject {
  @Published var title = ""
}

struct WebView: UIViewRepresentable {
  init(viewModel: WebViewModel) {
    print("\n-----> webview init")
  }

  func makeUIView(context: UIViewRepresentableContext<WebView>) -> WKWebView {
    print("\n-----> makeUIView")
    let wkWebView = WKWebView()
    if let url = URL(string: "https://www.google.com") {
      let request = URLRequest(url: url, cachePolicy: .returnCacheDataElseLoad)
      wkWebView.load(request)
    }

    return wkWebView
  }

  func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<WebView>) { }
}

struct MyWebView: View {
  @State private var toggleHight = false
  @ObservedObject private var viewModel = WebViewModel()

  init() {
    print("\n-----> root init")
  }

  var body: some View {
    VStack {
      WebView(
        viewModel: viewModel
      )
      .frame(
        height: { toggleHight ? 600 : 300 }()
      )

      Button(
        "toggle",
        action: {
          toggleHight.toggle()
        }
      )
    }
  }
}

当我使用UIViewControllerRepresentable 进行开发时，我一直在与这种严格的约束作斗争。在同事的帮助下，我完成了代码。

---

您的代码已被调用 6 次，因此可能存在一些问题。但我无法从您提供的代码中看出问题所在。

init 在SwiftUI 中被多次调用是很常见的。我们需要编写代码来处理这个问题。如果您的init 被频繁调用，您可能需要寻找根本原因。我引用的代码和我写的代码在启动时只有一次。