SwiftUI 如何检测到有@State 变量值传递给子视图？

Question

下面是一个简单的示例，它不使用@Binding，而是将@State 变量值直接传递给子视图（通过闭包）。

 1  import SwiftUI
   
 2  struct ContentView: View {
 3      @State var counter = 0
 4      var body: some View {
 5          print("ContentView")
 6          return VStack {
 7              Button("Tap me!") { self.counter += 1 }
 8              LabelView(number: counter)
 9          }
10      }
11  }
   
12  struct LabelView: View {
13      let number: Int
14      var body: some View {
15          print("LabelView")
16          return Group {
17                  Text("You've tapped \(number) times")
18          }
19      }
20  }

点击按钮会修改@State 变量，这会导致ContentView 和LabelView 都得到更新。一个常见的解释是，因为顶层视图的@State变量发生了变化，所以顶层ivew的body被重新执行了。

但我的实验表明，事情并没有那么简单。

• 例如，如果我在代码中删除了LabelView(number: counter) 调用（参见上面的第 8 行），那么点击按钮将不会执行 ContentView.body()。

• 再举个例子，如果我将 @Binding 变量而不是 @State 变量值传递给子视图，那么点击按钮也不会执行 ContentView.body()。

所以 SwiftUI 似乎知道顶级视图的 @State 变量值是否传递给子视图。我想知道它是如何确定的？我知道编译器有这种信息。但是 SwiftUI 是一个用 Swift 编写的框架。我认为 Swift 没有这种功能。

在写这个问题时，我意识到了一种可能的方法。注意上面的代码是在创建初始视图层次结构时执行的。也就是说，如果将@State 变量传递给子视图，则它的getter 必须在视图更新之前执行。似乎 SwiftUI 可能会利用这一点来确定是否有 @State 变量被传递给子视图（或在顶层视图的主体中访问）。

这就是它的工作方式吗？不知道大家是怎么理解的？谢谢。

---

更新 1：

以下是我与@Shadowrun 的讨论摘要，他帮助将这些部分组合在一起。我不知道这是否真的发生在幕后，但对我来说似乎是合理的。我把它写下来以防它也帮助别人。

1. SwiftUI 运行时以某种方式维护视图层次结构。例如，

   • 对于子视图，这可以在视图构建器的帮助下完成。例如，视图构建器向运行时注册子视图。

   • 对于顶级视图，这可以由运行时完成（注意顶级视图的主体是常规计算属性，而不是由视图构建器转换）。

2. SwiftUI 可以通过其 getter/setter 检测状态变量是否被读取或写入。

3. 这是假设。当 SwiftUI 创建初始视图层次结构时，它会为每个视图执行以下操作：

   • 设置当前视图

   • 运行视图的主体代码（我发现像 VStack 这样的布局类型的主体具有 Never 类型。我想它有一种等效的方式来遍历其子视图）。

   • 如果 SwiftUI 检测到视图的状态变量被读取，它会将状态变量和视图之间的依赖关系保存在某处。因此，如果应用程序稍后修改了该状态变量，视图的主体将被执行以更新视图。

     • 场景一：如果视图主体不读取视图的状态变量，则不会触发上述机制。因此，当应用修改状态变量时，视图不会更新。

     • 场景2：如果视图通过绑定将其状态变量传递给其子视图（即状态变量的投影值），也不会触发上述机制，因为读取/写入状态变量的投影值是通过Binding属性包装器的 getter/setter，而不是 State 属性包装器的 getter/setter。

---

更新2：

一个有趣的细节。请注意第 7 行中的 += 运算符。它通常实现为读取和写入。所以第 7 行的按钮处理程序也读取状态变量。但是，在创建初始视图层次结构时不会调用按钮处理程序，因此根据上面的理论，SwiftUI 不会因为第 7 行而召回ContentView.body。这可以通过删除第 8 行来证明。

更新3：

我对原始问题有一个新的、更简单的解释。在我最初的问题中，我提出：

所以 SwiftUI 似乎知道顶层视图的 @State 变量值是否传递给子视图。我想知道它是如何确定的？

这是一个错误的问题。 SwiftUI 很可能并不真正知道状态传递给子视图。相反，它只知道在视图的主体中访问状态（可能使用我上面描述的类似机制）。因此，如果视图的状态发生变化，它会重新评估视图的主体。就是这个简单的规则。

Answer 1

当你使用 state 属性包装器时，SwiftUI 可以知道何时读取了一个变量，因为它可以通过自定义 getter 函数管理访问。 当视图构建器闭包被评估时，SwiftUI 知道它正在评估哪个构建器函数，并可以设置其状态，以便在评估期间读取的任何状态变量都知道是当前正在评估的视图的依赖项。

在运行时：流程可能如下所示：

Need to render ContentView, so:
  set currentView = ContentView
  call each function in the function builder...
  ...LabelView(number: counter) - this calls the getter for counter

Getter for counter is:
  associate <currentView> with counter (means any time counter changes, need to recompute <currentView>)
  return value of counter


...after ContentView function builder
 Current view = nil

但是有一堆当前视图...

Answer 2

不是答案

我是一个网络人，不熟悉 swift，但看到这篇文章并觉得很有趣。我很想知道这段代码会如何表现？认为这会测试你的理论：

import SwiftUI
   
struct ContentView: View {
    @State var counter1 = 0
    @State var counter2 = 0
    var body: some View {
        print("ContentView")
        if Bool.random() {
            return VStack {
                Button("Tap me!") { self.counter2 += 1 }
                LabelView(number: counter1)
            }
        } else {
            return VStack {
                Button("Tap me!") { self.counter1 += 1 }
                LabelView(number: counter2)
            }
        }
    }
}

---

回答你的问题：

你知道 ReactJS 是否有类似的概念或对象，如@State、@Binding、@Environment 等？

需要明确的是，ReactJS 中没有隐式的 getter/setter 跟踪，它会自动触发视图更新（也称为重新渲染）。触发重新渲染的唯一 API 是对 setState() 函数的显式调用。

不过，在 React 中也有与 SwiftUI 的 @State 和 @Binding 相当的功能。简而言之，@State对应this.state，@Binding对应this.props。

一个典型的 React “类组件”如下所示：

class CounterView extends React.Component {
  // `constructor` is equiv to `init` in swift
  constructor(props) {
    // this calls the constructor of base class `React.Component`
    // which would assign `this.props = props`
    // where as `props` is a struct passed-in from outside, most likely from parent component.
    super(props)

    // `this` keyword is equiv to `self` in swift
    // in SwiftUI you declare `@State counter` property right on the instance
    // in React you need to put `counter` property inside a nested `this.state` struct
    this.state = {
      counter: 0
    }
  }

  render() {
    return React.createElement("div", null, [
      // in SwiftUI you need to declare `@Binding heading`
      // in React, because JS is dynamic lang,
      // you can simply access any properties of the passed-in `this.props` struct
      React.createElement("h1", null, this.props.heading),
      React.createElement("button", {
        // you modify local state by calling `setState` API
        onClick: () => this.setState({ counter: this.state.counter + 1 })
      }, "Tap me!"),
      React.createElement("span", null, this.state.counter)
    ])
  }
}