(1)SwiftUI 的哲学:声明式 UI vs 命令式 UI

🧭 SwiftUI 的哲学:声明式 UI vs 命令式 UI

"我描述 UI,而不是命令 UI。"


一、从 UIKit 到 SwiftUI:UI 思维方式的根本转变

如果你曾经写过 UIKit,那么你对这样的代码一定非常熟悉:

swift 复制代码
let label = UILabel()
label.text = "Hello, world!"
label.textColor = .blue
view.addSubview(label)

UIKit 的编程方式是 命令式(Imperative)

程序员告诉系统 一步一步 地做什么。

就像你在告诉厨师:

"先切菜,然后开火,再加油,再炒五分钟。"

这种方式虽然可控,但繁琐、冗长、难以维护。


二、SwiftUI 的哲学:描述"结果",而不是"过程"

SwiftUI 的思想是 声明式(Declarative)

你不再告诉系统"如何去做",而是描述"我想要什么"。

swift 复制代码
var body: some View {
    Text("Hello, world!")
        .foregroundColor(.blue)
}

这段代码的含义是:

"我想要一个显示'Hello, world!'的蓝色文本。"

系统会自动决定何时渲染、如何布局、何时更新。

你描述的是 UI 状态(what it is) ,而不是 UI 操作步骤(how to do it)


三、声明式与命令式的核心区别

对比维度 命令式(UIKit) 声明式(SwiftUI)
思维方式 指令式,告诉系统每一步怎么做 描述式,告诉系统最终想要的结果
状态管理 由开发者维护(常见状态错乱、同步难) 由框架自动追踪(@State、@Binding)
视图更新 手动触发 reloadData()setNeedsLayout() 状态变化自动驱动 UI 重绘
复杂界面 随着逻辑增长,控制器爆炸 状态驱动式结构更清晰、可组合
可读性 代码像"菜谱" 代码像"蓝图"

四、一个简单示例对比

🧱 UIKit(命令式)

swift 复制代码
class CounterViewController: UIViewController {
    var count = 0
    let label = UILabel()
    let button = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        label.text = "Count: 0"
        button.setTitle("Add", for: .normal)
        button.addTarget(self, action: #selector(increment), for: .touchUpInside)
        view.addSubview(label)
        view.addSubview(button)
    }

    @objc func increment() {
        count += 1
        label.text = "Count: \(count)"
    }
}

👉 你在命令系统:

"当按钮被点击时,调用 increment,再更新 label 的文字。"


🌱 SwiftUI(声明式)

swift 复制代码
struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Add") {
                count += 1
            }
        }
    }
}

👉 你只是声明:

"我有一个 count 状态,它变化时界面自动刷新。"

无需告诉 SwiftUI "怎么刷新",它自己会"观察状态"并重绘视图。

这就是 "UI 是状态的函数" 这一理念的体现:

swift 复制代码
UI = f(State)

五、SwiftUI 背后的哲学思想

SwiftUI 的哲学与 函数式编程(Functional Programming) 思想息息相关。

  1. 视图 = 状态的映射函数

    • 视图不是独立的,而是由数据(状态)自动生成的结果。
    • 改变状态 ≈ 改变数据 → UI 自然更新。
  2. 数据单向流动(Unidirectional Data Flow)

    • 数据只从上层流向下层视图。
    • @State → @Binding → 子组件,减少状态混乱。
  3. 最小可变性(Immutable by default)

    • 除非使用 @State、@ObservedObject,否则所有 View 都是不可变的。
    • 这使得 SwiftUI 的视图是"纯函数式"的。
  4. 组合优于继承(Composition over Inheritance)

    • UIKit 中大量依赖继承(UIViewController、UIView)。
    • SwiftUI 使用"View 组合",像搭积木一样拼装界面。

六、SwiftUI 的哲学口号:

"Don't tell me how. Tell me what."

(别告诉我怎么做,告诉我你想要什么。)

在 UIKit 时代,我们管理"控件";

在 SwiftUI 时代,我们管理"状态"。

UIKit 是命令式的"导演";

SwiftUI 是声明式的"剧本"。


七、为什么这很重要?

因为 SwiftUI 不是"另一个 UI 框架",

它是 苹果生态未来十年的 UI 思想基石

这种声明式哲学:

  • 更适合并发与异步环境(结合 @MainActorasync/await
  • 更天然适应多平台(iOS / watchOS / macOS / tvOS)
  • 更易测试、更易维护

学习 SwiftUI,不仅是学语法,更是 重塑思维方式


八、结语

UIKit 教我们控制一切;

SwiftUI 教我们放手,让系统帮你做繁琐的工作。

所以当你写下:

swift 复制代码
Text("Hello, world!")

这不仅是一行代码,更是一种宣言:

"我不再命令 UI,我描述 UI。"

"我不再操作状态,我表达状态。"

这就是 SwiftUI 的哲学。

相关推荐
薛定猫AI4 小时前
【深度解析】Gemini Omni 多模态生成与 Agent 化创作工作流:从视频编辑到 UI 生成的技术演进
人工智能·ui·音视频
赏金术士5 小时前
第七章:状态管理实战与架构总结
android·ui·kotlin·compose
幽络源小助理9 小时前
全新UI 阅后即焚V2正式版系统源码_全开源_安全加密传输
安全·ui·开源·php源码
ZC跨境爬虫14 小时前
跟着 MDN 学CSS day_2:(连接样式表与选择器的实战艺术)
java·前端·css·ui·html·媒体
ZC跨境爬虫15 小时前
跟着 MDN 学CSS day_1:(CSS 基石与色彩的艺术)
前端·javascript·css·ui·html
前端若水16 小时前
项目初始化:Vite + React + shadcn/ui
前端·react.js·ui
ZC跨境爬虫16 小时前
模块化烹饪小程序开发日记 Day4:网络层基础设施与接口治理实践
前端·javascript·数据库·ui·html
UI设计兰亭妙微1 天前
兰亭妙微|B端表单设计:UI设计公司中的场景化布局指南,提升用户填写效率
ui·b端界面设计·高端网站设计
颯沓如流星1 天前
前端 UI 组件专业术语科普指南
前端·ui
幽络源小助理2 天前
PS网页版源码_在线Photoshop源码_Nginx免环境部署_支持PSD
nginx·ui·photoshop