前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SwiftUI: 从 React 开发人员的角度看 SwiftUI

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

作者头像
小弟调调
发布2021-04-28 14:20:27
2K0
发布2021-04-28 14:20:27
举报
文章被收录于专栏:埋名

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

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

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

我一直遇到这些差异,通过总结这些差异帮助我更好的开发自己的应用,同时这会激发其他 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视图的示例:

使用 VStackText 原语视图的有效 SwiftUI 视图

代码语言:javascript
复制
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello there!")
            Text("I'm Maxime")
        }
    }
}

⚠️ 无效的 SwiftUI 视图示例

代码语言:javascript
复制
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")
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JSdig 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开发使用工具
  • View 剖析
  • View
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档