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