【SwiftUI】解决 NavigationLink 立即加载 destination View 的问题（实现懒加载）

大星

2020-03-23

Tech

在 SwiftUI 中，一般通过 NavigationView 配合 NavigationLinks 来实现页面间的跳转，可类比为 UIKit 中的 UINavigationController 与 segue（或者 push/present 语句）。熟悉 UIKit 的开发者刚接触 SwiftUI 时可能会遇到一个小坑：NavigationLinks 的 destination 并不是懒加载的。

遇到的问题

NavigationLinks 与 UIKit 中 push/present 之间的行为差异导致刚上手 SwiftUI 时，由于不知道目标 View 会被提前加载，使得目标 View 里的业务逻辑时序上出现问题。

我们都知道，UINavigationController 的目标 ViewController 只在调用了 push/present 后才会触发常用的加载方法 viewDidLoad()。

然而在 SwiftUI 中，NavigationLinks 的目标 View 会立即加载，这意味着假设有一个包含 100 个 cell 的 List/ForEach，其中每个 cell 都是用 NavigationLinks 来跳转新页面的话，那当加载显示这个 List 时，内存中会马上创建 100 个对应的 View 结构体。

如果这些 View 的构造函数中还做了些开销大的操作比如网络请求、加载资源等。。。可以想象将导致什么后果🤣

例：

如下所示，MyRootView 是首页 View，通过 NavigationView 来实现路由导航功能，其中是一个包含了三个 cell 的 List，每个 cell 是一个 NavigationLinks，分别导航至 FirstView、SecondView、ThirdView。

import SwiftUI

struct MyRootView: View {

    let myViews = [
        "FirstView",
        "SecondView",
        "ThirdView"
    ]

    func containedView(viewName: String) -> AnyView {
        switch viewName {
        case "FirstView":
            return AnyView(FirstView())
        case "SecondView":
            return AnyView(SecondView())
        case "ThirdView":
            return AnyView(ThirdView())
        default:
            return AnyView(Text("None"))
        }
    }

    var body: some View {
        NavigationView {
            List(myViews, id: \.self) { viewName in
                NavigationLink(destination: self.containedView(viewName: viewName)) {
                    Text(viewName)
                }
            }
            .navigationBarTitle(Text("ZegoExpressExample"), displayMode: .automatic)
            .onAppear {
                NSLog("🚩 MyRootView appear")
            }
        }
    }
}

然后，在 FirstView、SecondView、ThirdView 的实现中，View 结构体里包含一个 class 实例属性，如下所示：

struct FirstView: View {
    private let firstCoordinator = FirstCoordinator()

    init() {
        NSLog("1️⃣ FirstView init 🟢")
    }

    var body: some View {
        Text("I'm FirstView created by Patrick Fu")
            .onAppear {
                NSLog("---------1️⃣ FirstView appear-------")
            }.onDisappear {
                NSLog("---------1️⃣ FirstView disappear-------")
            }
    }

    class FirstCoordinator: NSObject {
        override init() {
            NSLog("1️⃣ FirstCoordinator init 🟢")
        }

        deinit {
            NSLog("1️⃣ FirstCoordinator deinit 🔴")
        }
    }
}

import SwiftUI

struct SecondView: View {
    private let secondCoordinator = SecondCoordinator()

    init() {
        NSLog("2️⃣ SecondView init 🟢")
    }

    var body: some View {
        Text("I'm SecondView created by Patrick Fu")
            .onAppear {
                NSLog("---------2️⃣ SecondView appear-------")
            }.onDisappear {
                NSLog("---------2️⃣ SecondView disappear-------")
            }
    }

    class SecondCoordinator: NSObject {
        override init() {
            NSLog("2️⃣ SecondCoordinator init 🟢")
        }

        deinit {
            NSLog("2️⃣ SecondCoordinator deinit 🔴")
        }
    }
}

ThirdView 的实现完全一致，就不贴出来了

测试一下，通过日志可以发现，当加载显示 MyRootView 的时候，通过 NavigationLinks 导航的目标 View 全部被提前立即初始化了，并且其属性 Coordinator 类也被实例化了。

2020-03-23 01:10:46.546218+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 🚩 MyRootView appear
2020-03-23 01:10:46.553204+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 1️⃣ FirstCoordinator init 🟢
2020-03-23 01:10:46.553234+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 1️⃣ FirstView init 🟢
2020-03-23 01:10:46.558073+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 2️⃣ SecondCoordinator init 🟢
2020-03-23 01:10:46.558104+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 2️⃣ SecondView init 🟢
2020-03-23 01:10:46.559791+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 3️⃣ ThirdCoordinator init 🟢
2020-03-23 01:10:46.559808+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 3️⃣ ThirdView init 🟢
2020-03-23 01:11:03.746197+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------1️⃣ FirstView appear-------
2020-03-23 01:11:06.641696+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 🚩 MyRootView appear
2020-03-23 01:11:06.892756+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------1️⃣ FirstView disappear-------
2020-03-23 01:11:08.618983+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------2️⃣ SecondView appear-------
2020-03-23 01:11:11.507952+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 🚩 MyRootView appear
2020-03-23 01:11:11.680365+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------2️⃣ SecondView disappear-------
2020-03-23 01:11:13.138151+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------3️⃣ ThirdView appear-------
2020-03-23 01:11:15.317203+0800 ZegoExpressExample-iOS-Swift[76375:18919854] 🚩 MyRootView appear
2020-03-23 01:11:15.488869+0800 ZegoExpressExample-iOS-Swift[76375:18919854] ---------3️⃣ ThirdView disappear-------

并且在右滑返回主页面时，View 和其 Coordinator 类实例也并没有被释放，GG~

解决方法

首先，NavigationLinks 立即加载 destination 的现象应该是 SwiftUI 的 Feature。因为在 SwiftUI 中，View 是非常轻量化的结构体，类似于 Flutter 中的 Widget，创建、销毁的开销非常低。

方案一

因此，其中一种解决方案就是充分利用 View 的 onAppear() 和 onDisappear() 作为依赖注入来实现自己的业务逻辑和一些开销大的操作，避免在 View 初始化的时机做业务逻辑。也就是说，把 View 的 onAppear() 当做 UIKit 中的 viewDidLoad() 来使用，并且避免在 View 的属性中直接初始化开销大的对象。

方案二

当然了，作为老 UIKit/AppKit 开发者，大量的对象瞬间全部加载实在难顶，还是得懒加载才行。

那另一种解决方案就是通过给 destination 的 View 包裹一层自定义的 View 来实现懒加载功能。

LazyView.swift

import SwiftUI

public struct LazyView<Content: View>: View {
    private let build: () -> Content
    public init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    public var body: Content {
        build()
    }
}

一个 View 的 body 属性只在这个 View 被显示出来的时候才会被执行，也就是说，当 body 中的 NavigationLinks 的 destination 是另一个 ViewB 时，这个 destination 的 ViewB 会被马上初始化，但是 ViewB 的 body 属性不会被执行。

换句话说，SwiftUI 会立刻加载当前层级以及下一层级的 View，但不会加载第三层级的 View。

因此，用一个自定义 View 来包裹住真正想要跳转的目标 View，就可以变相的实现懒加载。

实际上，此方案只是“懒加载”了目标 View，在一个拥有大量 cell 的 List/ForEach 中，还是会有等同数量的 LazyView 被创建。

这种方式并不 Swifty，目前看来，最好还是按照 SwiftUI 的设计理念来做业务逻辑，也就是上面的方案一。

用法示例

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: LazyView(Text("My details page"))) {
                Text("Go to details")
            }
        }
    }
}

修改后的 MyRootView 的 body 如下所示

var body: some View {
    NavigationView {
        List(myViews, id: \.self) { viewName in
            NavigationLink(destination: LazyView(self.containedView(viewName: viewName))) {
                Text(viewName)
            }
        }
        .navigationBarTitle(Text("ZegoExpressExample"), displayMode: .automatic)
        .onAppear {
            NSLog("🚩 MyRootView appear")
        }
    }
}

测试一下，当加载显示 MyRootView 时，通过 NavigationLinks 导航的目标 View 都实现了懒加载，并且在返回 MyRootView 并进入其他新的 View 时，上一个老 View 也能被释放，这就非常舒服了。

2020-03-23 01:32:12.577138+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 🚩 MyRootView appear
2020-03-23 01:32:26.788288+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 1️⃣ FirstCoordinator init 🟢
2020-03-23 01:32:26.788380+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 1️⃣ FirstView init 🟢
2020-03-23 01:32:26.811396+0800 ZegoExpressExample-iOS-Swift[76407:18927258] ---------1️⃣ FirstView appear-------
2020-03-23 01:32:57.753106+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 🚩 MyRootView appear
2020-03-23 01:32:57.969867+0800 ZegoExpressExample-iOS-Swift[76407:18927258] ---------1️⃣ FirstView disappear-------
2020-03-23 01:33:00.826847+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 2️⃣ SecondCoordinator init 🟢
2020-03-23 01:33:00.826983+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 2️⃣ SecondView init 🟢
2020-03-23 01:33:00.831038+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 1️⃣ FirstCoordinator deinit 🔴
2020-03-23 01:33:00.850590+0800 ZegoExpressExample-iOS-Swift[76407:18927258] ---------2️⃣ SecondView appear-------
2020-03-23 01:33:04.745348+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 🚩 MyRootView appear
2020-03-23 01:33:05.011015+0800 ZegoExpressExample-iOS-Swift[76407:18927258] ---------2️⃣ SecondView disappear-------
2020-03-23 01:33:06.126583+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 3️⃣ ThirdCoordinator init 🟢
2020-03-23 01:33:06.126716+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 3️⃣ ThirdView init 🟢
2020-03-23 01:33:06.130353+0800 ZegoExpressExample-iOS-Swift[76407:18927258] 2️⃣ SecondCoordinator deinit 🔴
2020-03-23 01:33:06.149465+0800 ZegoExpressExample-iOS-Swift[76407:18927258] ---------3️⃣ ThirdView appear-------