本篇文章讨论的内容主要是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)) } } } 复制代码
上边的代码很简单,运行后,效果如下图:
打印如下:
OddOrEvenView刷新了, -- 0 OddOrEvenView刷新了, -- 109 OddOrEvenView刷新了, -- 243 OddOrEvenView刷新了, -- 850 OddOrEvenView刷新了, -- 602 OddOrEvenView刷新了, -- 237 OddOrEvenView刷新了, -- 109 OddOrEvenView刷新了, -- 115 OddOrEvenView刷新了, -- 508 OddOrEvenView刷新了, -- 443 复制代码
从上边的例子中,我们总结出:
n
后,OddOrEvenView都会计算body我们让OddOrEvenView实现Equatable协议:
struct OddOrEvenView: View, Equatable { ... static func ==(lhs: OddOrEvenView, rhs: OddOrEvenView) -> Bool { return lhs.number.isOdd == rhs.number.isOdd } } 复制代码
在看看打印结果:
OddOrEvenView刷新了, -- 0 OddOrEvenView刷新了, -- 263 OddOrEvenView刷新了, -- 136 OddOrEvenView刷新了, -- 453 OddOrEvenView刷新了, -- 926 OddOrEvenView刷新了, -- 575 OddOrEvenView刷新了, -- 596 OddOrEvenView刷新了, -- 111 复制代码
结合上边的动图和打印结果,我们可以发现,实现了Equatable后,果然只有切换奇偶才会重新计算body。
我在上边的代码中埋了一个伏笔,大家留意这行代码了没?
@State private var show = false 复制代码
在OddOrEvenView中,这行代码没什么卵用,那我为什么还要写它呢? 为了说明这里边的区别,咱们先去掉这行代码,然后运行:
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协议中的函数。
这也算符合逻辑,我做一个简单的总结: