SwiftUI之View实现Equatable协议

本篇文章讨论的内容主要是View的刷新问题，当view需要刷新时，就会去计算body，那么，在某些特定场景下，view的状态并没有改变，如果每次都计算body，肯定会造成性能的浪费。接下来，我们就探讨一下，如何让view实现Equatable协议。

为了演示这个过程，我们写一个小的demo，每次点击按钮，随机生成一个整数，我们自定义一个view，显示该数字是奇数还是偶数。

代码如下：

struct ContentView: View {
    @State private var n: Int = 0

    var body: some View {
        VStack {
            Spacer()

            OddOrEvenView(number: n)

            Text("\(n)")
                .foregroundColor(.primary)
                .padding(.vertical, 20)

            Button("随机生成整数") {
                self.n = Int.random(in: 10...1000)
            }
            .padding(.vertical, 20)

            Spacer()
        }
    }
}

extension Int {
    var isOdd: Bool { self % 2 != 0 }
    var isEven: Bool { self % 2 == 0 }
}

struct OddOrEvenView: View {
    let number: Int

    @State private var show = false

    var body: some View {
        print("OddOrEvenView刷新了， -- \(self.number)")
        return VStack {
            Text("\(number.isOdd ? "奇数" : "偶数")")
                .font(.largeTitle)
                .padding(20)
                .foregroundColor(.white)
                .background(RoundedRectangle(cornerRadius: 5).fill(number.isOdd ? Color.green : Color.blue))
        }
    }
}

上边的代码很简单，运行后，效果如下图：

Kapture 2020-06-28 at 17.34.19.gif

打印如下：

OddOrEvenView刷新了， -- 0
OddOrEvenView刷新了， -- 109
OddOrEvenView刷新了， -- 243
OddOrEvenView刷新了， -- 850
OddOrEvenView刷新了， -- 602
OddOrEvenView刷新了， -- 237
OddOrEvenView刷新了， -- 109
OddOrEvenView刷新了， -- 115
OddOrEvenView刷新了， -- 508
OddOrEvenView刷新了， -- 443

从上边的例子中，我们总结出：

当我们修改了n后，OddOrEvenView都会计算body
其实OddOrEvenView没必要每次都计算body，只有当奇偶切换的时候，才有必要重新计算body

我们让OddOrEvenView实现Equatable协议：

struct OddOrEvenView: View, Equatable {
        ...
    static func ==(lhs: OddOrEvenView, rhs: OddOrEvenView) -> Bool {
        return lhs.number.isOdd == rhs.number.isOdd
    }
}

Kapture 2020-06-28 at 17.45.16.gif

在看看打印结果：

OddOrEvenView刷新了， -- 0
OddOrEvenView刷新了， -- 263
OddOrEvenView刷新了， -- 136
OddOrEvenView刷新了， -- 453
OddOrEvenView刷新了， -- 926
OddOrEvenView刷新了， -- 575
OddOrEvenView刷新了， -- 596
OddOrEvenView刷新了， -- 111

结合上边的动图和打印结果，我们可以发现，实现了Equatable后，果然只有切换奇偶才会重新计算body。

我在上边的代码中埋了一个伏笔，大家留意这行代码了没？

@State private var show = false

在OddOrEvenView中，这行代码没什么卵用，那我为什么还要写它呢？为了说明这里边的区别，咱们先去掉这行代码，然后运行：

Kapture 2020-06-28 at 17.50.32.gif

OddOrEvenView刷新了， -- 0
OddOrEvenView刷新了， -- 939
OddOrEvenView刷新了， -- 180
OddOrEvenView刷新了， -- 890
OddOrEvenView刷新了， -- 948
OddOrEvenView刷新了， -- 960
OddOrEvenView刷新了， -- 149
OddOrEvenView刷新了， -- 190
OddOrEvenView刷新了， -- 224
OddOrEvenView刷新了， -- 413
OddOrEvenView刷新了， -- 653

结合动图和打印结果，我们发现，在每次修改n后，OddOrEvenView每次都计算body了。为什么并没有用到的代码@State private var show = false就能让Equatable生效呢？

在当前版本中的SwiftUI中，如果某个View实现了Equatable协议，只有当其内部存在复杂属性的情况下，系统才会调用Equatable协议中的函数。

那么什么是复杂属性呢？类似于用@State,ObservedObject或者environmentObject等等，与之相对应的是POD(plain data),也就是基本数据类型。

那么有没有一种方法，让我们不用关心View中是否有复杂属性，也能调用Equatable协议中的方法呢？答案就是EquatableView或.equatable(),他们是等效的。

struct ContentView: View {
    @State private var n: Int = 0

    var body: some View {
        VStack {
            Spacer()

            EquatableView(content: OddOrEvenView(number: n))

            Text("\(n)")
                .foregroundColor(.primary)
                .padding(.vertical, 20)

            Button("随机生成整数") {
                self.n = Int.random(in: 10...1000)
            }
            .padding(.vertical, 20)

            Spacer()
        }
    }
}

只需要修改一点点代码就可以了，我就不把打印结果弄上来了，大家有兴趣的可以自己运行并查看效果。

EquatableView(content: OddOrEvenView(number: n))
OddOrEvenView(number: n).equatable()

值得注意的是，上边两种写法是等效的。但是，经过我的验证，只有View中有复杂属性的时候才会调用Equatable协议中的函数。

这也算符合逻辑，我做一个简单的总结：

当view中包含复杂属性的时候，如果view实现了Equatable协议，则调用我们写的协议函数
当view中不包含复杂属性的时候，如果实现了Equatable协议，则系统会自动根据view值的变化进行刷新，如果没有实现Equatable协议，则每次都需要计算body