SwiftUI: 从 React 开发人员的角度看 SwiftUI

最近我通过学习 SwiftUI 时，令我印象最深的就是我对它的熟悉程度，因为我已经在 React 和 TypeScript上工作了几年了。

确实，有使用 React 库/框架和类型的经验可以极大地加快我的学习速度。我的第一个SwiftUI代码对我过去在 React 中构建的东西感到非常陌生，而且我可以看到设计模式有很多重叠之处。

现在，我开始自己开发应用程序，我想分享一些常见的设计模式以及 SwiftUI 和 React 之间的微小差异，通过这些差异

我一直遇到这些差异，通过总结这些差异帮助我更好的开发自己的应用，同时这会激发其他 React 开发人员更出色的开始使用 SwiftUI。

开发使用工具

• macOS Big Sur
• Xcode 12.4
• 运行实例运行在 MacBook Pro (13-inch, M1, 2020)

View 剖析

在进入本主题的核心之前，我想先介绍一下构成 SwiftUI 视图的关键元素。不仅要知道 属性包装器(property wrappers)，视图(view)和视图修饰符(view modifiers)是什么，以及它们之间的差异对于使用 SwiftUI 来说是必不可少的，而且对于本文中我将要讨论的某些事情，这也是必要的。在下图中，您可以看到一个代码片段，其中包含一个基本的 SwiftUI 视图以及一个视图修饰符和一个属性包装器。

上图展示了组成 SwiftUI视图的主要元素

View

这是表示与用户界面有关的任何内容的 protocol 协议或 type 类型。如果需要的话，它们对SwiftUI 来说是什么组件。

要声明一个自定义的SwiftUI视图（如上图所示），您需要做两件事：

1. 声明一个符合View协议的结构。 这意味着我们的结构类型满足视图协议的要求。
2. 需要满足的要求如下： 结构必须具有某些View类型的body属性。

该 body 属性可以包含从单个原始视图（SwiftUI框架默认提供的视图）到复杂的嵌套视图的任何内容。

在下面，您将找到两个代码段，第一个包含有效的SwiftUI视图，第二个显示无效的SwiftUI视图的示例：

使用 VStack 和 Text 原语视图的有效 SwiftUI 视图

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello there!")
            Text("I'm Maxime")
        }
    }
}

⚠️ 无效的 SwiftUI 视图示例

struct ContentView: View {
    var body: some View {
        Text("Hello there!")
        Text("I'm Maxime")
    }
}

struct ContentView: View {
    var body: some View {
        print("Hello")
    }
}

struct ContentView: View {
    return Text("Hello World")
}