【现代声明式UI学与练】第2课 声明式UI的实际载体和三种载体形态深度解析

一、本课目标学完这一课你要建立六个认知载体认知声明式 UI 的实际载体就是一段“接收状态、返回 UI 描述”的代码块。载体代码块是 UI 界面的“设计图”不是 UI 本身。三种形态这段代码块有三种载体形态——函数React、Compose、类的方法Flutter、结构体SwiftUI、ArkUI。统一循环状态变化 → 代码块重新执行 → 返回新 UI 描述 → 框架对比新旧描述 → 更新底层实际显示在屏幕上的UI界面。身份机制载体形态决定了框架如何识别“这是同一个组件还是新实例”进而决定状态的生命周期。状态归属在所有框架中状态都不在代码块内部而是由框架的独立机制管理。迁移认知理解载体差异的深层逻辑就能在跨框架迁移时把心智模型平移过去。本课核心线索先理解“载体代码块是 UI 界面的设计图不是 UI 本身” → 再逐一拆解三种载体形态的机制 → 最后比较三种形态在身份识别和状态管理上的差异二、载体认知载体代码块是 UI 界面的“设计图”2.1 一句话说透声明式 UI 的实际载体 一段接收状态、返回 UI 描述的代码块。 这段代码块是 UI 界面的“设计图”不是 UI 本身。这个定义是精确的也符合主流框架官方文档的表述。React 官方文档的表述是“组件是 JavaScript 函数或类可选地接受输入称为 props并返回描述屏幕上应显示内容的 React 元素。”函数组件是“定义组件最简单的方式”一个 JavaScript 函数接受单个props对象参数返回一个 React 元素。React 团队进一步强调“所有 React 组件必须像纯函数一样对待其 props。”给定相同的输入组件应该始终返回相同的输出——就像同一份设计参数应该产出同一份设计图。Compose 官方文档的表述同样精确可组合函数是**“带有 Composable 注解的常规函数”这类函数“接受数据并发出 UI 元素”。文档特别指出一个关键特征“此函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容因为它们描述所需的屏幕状态而不是构造界面 widget。”**Flutter 的build方法文档从框架角度给出了最直白的说明“描述此 widget 所代表的用户界面的一部分。框架在将此 widget 插入树中时、以及此 widget 的依赖变化时调用此方法。此方法可能每帧都被调用除了构建 widget 外不应有任何副作用。”ArkUI 的官方文档定义是“ArkTS 以声明方式组合和扩展组件来描述应用程序的 UI。”自定义组件通过使用Component和Entry装饰用struct关键字声明的数据结构来定义必须提供一个build函数。核心理解载体是一段代码块——它接收状态返回 UI 描述。代码块是 UI 界面的“设计图”不是 UI 本身。就像设计图不是建筑本身但它完整描述了建筑应该长什么样。你反复把状态作为参数灌进代码块它反复产出 UI 描述。React 的函数返回的不是 DOM 元素而是一个轻量级的“UI 描述对象”。Flutter 的build()返回一个 Widget 子树框架用它替换 widget 下方的子树。ArkUI 的build函数“用于定义组件的声明式 UI 描述”。2.2 统一循环代码块执行读取状态→ 产出 UI 描述 状态变化 → 代码块重新执行 → 产出新 UI 描述 框架对比新旧描述 → 更新底层实际显示在屏幕上的UI界面React 的工作流程精确地体现了这个循环组件 render 返回轻量级 JS 对象状态变化时创建新虚拟树与旧树递归比较计算出最小变更集再批量更新底层实际显示在屏幕上的 UI 界面。Compose 的文档对此的描述是“当 Jetpack Compose 首次运行可组合项时在初始组合期间它将跟踪您为了描述组合中的界面而调用的可组合项。然后当应用的状态发生变化时Jetpack Compose 会安排重组。重组是指 Jetpack Compose 重新执行可能因状态更改而更改的可组合项然后更新组合以反映所有更改。”Flutter 的文档对此的描述是当 widget 被插入树中或依赖变化时框架调用build()方法“框架将用此方法返回的 widget 替换此 widget 下方的子树”最终更新底层实际显示在屏幕上的 UI 界面。2.3 三种载体形态总览载体形态框架实际代码结构载体在框架中的角色函数React、Composefunction Foo() { return ... }/Composable fun Foo()函数代码块本身就是组件身份类的方法Flutterclass Foo extends StatelessWidget { Widget build() }类持有配置build()代码块是出口结构体的属性/方法SwiftUI、ArkUIstruct Foo: View { var body }/Component struct Foo { build() }结构体是声明载体body/build代码块是描述出口三、载体形态一函数React 与 Compose3.1 React函数代码块直接返回 JSX// // 【载体形态一函数】React 函数组件 // 载体Counter 函数代码块本身 // 组件身份函数在 JSX 树中的调用位置 // 状态归属useState 的 Hook 链不在函数代码块内部 // function Counter() { // ---- 状态声明 ---- // useState 返回一对值[当前状态, 更新函数] // 关键count 变量在函数退出时不会消失 // 它被 React 保留在函数组件的“Hook 调用顺序”中 // 载体函数代码块本身不持有状态状态由框架管理 const [count, setCount] useState(0) // ---- 返回 UI 描述 ---- // 函数返回的不是 DOM 元素而是轻量级的“UI 描述对象” // 这份 return 就是“设计图”描述当前状态下界面应该长什么样 return ( View {/* 读取状态嵌入描述 */} Text计数{count}/Text {/* 事件绑定通过 setCount 触发状态更新 */} {/* 状态变化 → React 重新调用 Counter 函数代码块 → 产出新设计图 */} Button title1 onPress{() setCount(count 1)} / /View ) }示例代码解读照应载体形态一函数这段代码是函数作为载体的标准形态。Counter函数代码块本身就是载体——它接收props此处未使用返回 JSX 作为 UI 描述。React 官方文档的定义是“定义组件最简单的方式是写一个 JavaScript 函数。”函数组件接受一个props对象参数返回一个 React 元素。载体是函数代码块意味着组件身份就是函数在 JSX 树中的调用位置。React 靠调用位置识别“这是同一个组件还是新实例”。条件渲染时函数被跳过状态会被丢弃。状态count不在函数代码块内部。useState返回的状态变量在函数退出时本应消失但 React 通过 Hook 机制在函数组件的“调用顺序”中保留了这些值。这直接证明了载体代码块是设计图状态在框架的档案柜里。return的 JSX 是设计图的输出。给定相同的props和state函数应该返回相同的描述——React 团队强调“所有 React 组件必须像纯函数一样对待其 props。”3.2 Jetpack Compose可组合函数代码块“发出”描述// // 【载体形态一函数】Compose 可组合函数// 载体CounterScreen 函数代码块本身// 组件身份函数在组合中的调用点// 状态归属remember 的状态槽不在函数代码块内部// ComposablefunCounterScreen(){// ---- 状态声明 ----// remember 将对象存储在组合中与调用点绑定// mutableStateOf 创建可观察状态// 关键count 的状态存储在组合的“调用点”中// 载体函数代码块本身不持有状态状态由框架管理valcountremember{mutableStateOf(0)}// ---- 发出 UI 描述 ----// 可组合函数不 return 任何内容// 它通过调用其他可组合函数来“发出”UI 元素// 这段代码块就是“设计图”描述当前状态下界面应该长什么样Column{// 读取状态嵌入描述Text(计数${count.value})// 事件绑定通过修改 count.value 触发重组// 状态变化 → Compose 重新执行 CounterScreen 函数代码块 → 产出新设计图Button(onClick{count.value}){Text(1)}}}示例代码解读照应载体形态一函数这段代码是函数作为载体的另一种形态。CounterScreen函数代码块本身就是载体但与 React 的关键差异在于Compose 的可组合函数不return任何内容。官方文档的表述是“此函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容因为它们描述所需的屏幕状态而不是构造界面 widget。”载体是函数代码块意味着组件身份是函数在组合中的调用点。Compose 编译器将每个调用点视为唯一标识。“组合中可组合项的实例由其调用点进行标识。Compose 编译器将每个调用点都视为不同的调用点。”状态count不在函数代码块内部。remember将对象存储在组合中与调用点绑定。“remember将对象存储在组合中并且如果remember被调用的源代码位置在重组期间没有被再次调用则会忘记该对象。”状态的生命周期与调用点绑定而不是与函数本身绑定。UI 描述通过“发出”而非“返回”来交付。Text()和Button()被调用时描述就被“发出”了。从载体角度看React 把描述作为return值交出Compose 把描述“写”到调用链中——都是设计图只是交付方式不同。四、载体形态二类的方法Flutter4.1 类持有身份build 方法代码块是出口// // 【载体形态二类的方法】Flutter Widget// 载体Greeting 类本身持有配置// 描述出口build() 方法代码块返回 Widget 子树// 组件身份Element 树中的位置// 状态归属State 对象不在 Widget 中// classGreetingextendsStatelessWidget{// ---- 配置类持有不可变数据 ----// Widget 是不可变的“蓝图”// name 是传入的配置不是状态finalStringname;constGreeting({super.key,requiredthis.name});// ---- 描述出口build 方法代码块返回 UI 描述 ----// 这是“设计图”的产出点// 框架在将 widget 插入树中时、以及依赖变化时调用此方法overrideWidgetbuild(BuildContextcontext){// return 的 Widget 子树就是 UI 描述// 框架用此方法返回的 widget 替换此 widget 下方的子树returnText(Hello,$name);}}示例代码解读照应载体形态二类的方法这段代码是类的方法作为载体的标准形态。Flutter 的组件在外壳上是类Greeting类持有配置namebuild()方法代码块返回 Widget 子树。Flutter 官方文档对build()方法的描述是“描述此 widget 所代表的用户界面的一部分。框架在将此 widget 插入树中时、以及此 widget 的依赖变化时调用此方法。此方法可能每帧都被调用除了构建 widget 外不应有任何副作用。”载体是类但真正执行“返回 UI 描述”动作的是类的方法代码块。从载体角度看Flutter 的build()方法代码块与 React 的函数、Compose 的Composable函数处于同一位置它们都是“接收状态、返回 UI 描述”的设计图。Flutter 的特殊性在于它把“组件身份”类和“描述出口”build方法代码块分离了。Widget 是不可变的“蓝图”build()方法代码块返回的是根据当前配置构造出的 widget 子树。当setState被调用时框架重新执行build()用新的 widget 子树替换旧的。为什么build方法放在State上而不是StatefulWidget上Flutter 官方文档解释这给开发者更大的灵活性避免闭包隐式捕获this导致的 bug。如果build定义在StatefulWidget上闭包会捕获当前的 widget 实例不可变当 widget 更新时闭包仍然引用旧数据放在State上闭包捕获的是State实例它在重建之间保持存活框架会更新其widget属性以引用新实例。4.2 Flutter 在三种载体形态中的位置如果按“函数 vs 结构体”来分Flutter 两边都不沾。它的组件是类。但真正执行“返回 UI 描述”动作的是类的方法代码块。从载体角度看Flutter 的build()方法代码块与 React 的函数代码块、Compose 的Composable函数代码块处于同一位置它们都是“接收状态、返回 UI 描述”的代码块。五、载体形态三结构体SwiftUI 与 ArkUI5.1 SwiftUIstruct 是声明载体body 代码块是描述出口// // 【载体形态三结构体】SwiftUI View// 载体ContentView 结构体本身轻量级“视图值”// 描述出口body 计算属性代码块返回 View 值// 组件身份AttributeGraph 中的属性节点// 状态归属AttributeGraph 属性节点不在结构体中// structContentView:View{// ---- 状态声明 ----// State 在 AttributeGraph 的属性节点中分配存储// 这个存储由视图身份索引在视图生命周期内持久存活// 载体结构体本身是临时的、被频繁重建的“设计图”Stateprivatevarcount0// ---- 描述出口body 计算属性代码块返回 UI 描述 ----// 这是“设计图”的产出点// SwiftUI 会在需要更新视图的任何时候读取此属性的值// 视图返回的值是 SwiftUI 在屏幕上绘制的一个元素varbody:someView{VStack{// 读取状态嵌入描述Text(计数\(count))// 事件绑定直接改变量State 包装器拦截写入// 状态变化 → SwiftUI 创建新事务 → 重新执行 body 代码块 → 产出新设计图Button(1){count1}}}}示例代码解读照应载体形态三结构体这段代码是结构体作为载体的标准形态。ContentView结构体是载体body计算属性代码块是描述出口。Apple 官方文档的定义是“视图声明符合 View 协议然后实现一个 body 属性通过返回另一个 View 值来定义它们的外观和行为。”WWDC 2025 的讲解揭示了 SwiftUI 的底层机制——AttributeGraph“首次将这个视图添加到视图层次结构中时SwiftUI 会从存储视图结构体的父级视图接收一个名为属性的对象。视图结构体会频繁地重新创建但属性会保持它的标识并在视图的整个生命周期内保持当前状态。因此随着父视图的更新这个属性的值将更改但它的标识不会变。”这段描述直接说明了载体与状态分离的核心机制视图结构体是临时的、被频繁重建的“设计图”但它在 AttributeGraph 中的“属性节点”保持了身份和状态。当你改变State变量时SwiftUI 不会立即更新视图而是创建一个新事务将状态变量的 signal 属性标记为“Outdated”然后沿着依赖链将相关属性标记为“Outdated”。之后SwiftUI 才运行事务重新执行body代码块生成新的 View 值。有一个 Stack Overflow 的回答精准地概括了 SwiftUI 载体的本质“View 结构体不‘绘制’任何东西。这些是超快的轻量级值类型像int x 3一样。SwiftUI 重新计算它检测到数据依赖变化的部分与上次的层次结构进行差异对比然后自动为你添加/移除/更新 UIView。”5.2 ArkUIstruct 是组件声明build 代码块是描述出口// // 【载体形态三结构体】ArkUI 自定义组件// 载体Index 结构体本身组件声明// 描述出口build() 方法代码块返回组件树// 组件身份视图树中的位置// 状态归属框架状态管理不在结构体中// Componentstruct Index{// ---- 状态声明 ----// State 装饰的变量与组件绑定// 框架内建立了数据和视图之间的绑定// 其值的改变影响 UI 的显示// 载体结构体本身是组件声明状态由框架管理Statecount:number0// ---- 描述出口build 方法代码块返回 UI 描述 ----// 这是“设计图”的产出点// build 函数用于定义组件的声明式 UI 描述build(){Column(){// 读取状态嵌入描述Text(计数${this.count})// 事件绑定直接改变量State 触发 UI 刷新// 状态变化 → 框架重新执行 build 代码块 → 产出新设计图Button(1).onClick((){this.count})}}}示例代码解读照应载体形态三结构体这段代码是结构体作为载体的另一种形态。ArkUI 官方文档的定义是“在 ArkTS 中你通过使用装饰器 Component 和 Entry 装饰用 struct 关键字声明的数据结构来定义自定义组件。自定义组件提供一个 build 函数你必须在其中以链式调用模式编写基本 UI 描述。”ArkUI 文档特别强调了一条重要规则“在 ArkUI 状态管理中状态驱动 UI 更新。所以不能在自定义组件的 build() 或 Builder 方法里直接改变状态变量这可能会造成循环渲染的风险。”文档给出了一个具体例子Text(\${this.count}) 在 build 中直接改变状态可能导致无限重渲染循环——因为每次 build 执行都会改变状态进而触发新的 build。ArkUI 的 UI 描述语法有几个独特特征创建组件不需要使用new关键字属性方法以.链式调用配置事件方法同样以.链式调用配置支持子组件的组件如 Column、Row在尾随闭包{...}中添加子组件的 UI 描述。5.3 结构体作为载体的本质SwiftUI 和 ArkUI 用结构体作为载体核心理由是值语义。结构体传递时复制没有共享可变引用。这让“视图 状态的函数”这个心智模型在语言层面得到强化SwiftUIbody是计算属性每次读取重新计算。视图结构体是“轻量级设计图”被创建、渲染、然后丢弃。状态在 AttributeGraph 的属性节点中持久存活与视图在树中的身份绑定。ArkUIbuild是方法State触发 UI 刷新。结构体是组件的声明载体状态变化通过框架的状态管理机制驱动 UI 更新。六、三种载体形态的深层比较6.1 身份识别机制载体形态直接影响框架如何判断“这是同一个组件还是新实例”。React函数组件靠调用位置在 JSX 树中的位置识别。React 团队指出“组件类型参与协调。通过让 React 调用你的组件你也告诉了它更多关于树的概念结构的信息。”条件渲染时函数被跳过状态会被丢弃。Compose可组合项靠调用点识别。“组合中可组合项的实例由其调用点进行标识。Compose 编译器将每个调用点都视为不同的调用点。从多个调用站点调用可组合项会在组合中创建多个可组合项实例。”Flutter靠Element 树识别。Widget 是不可变的蓝图Element 是持久化的实例在帧之间存活。SwiftUI靠AttributeGraph 中的属性节点识别。“视图结构体会频繁地重新创建但属性会保持它的标识并在视图的整个生命周期内保持当前状态。”6.2 状态存储在哪里三种载体形态的差异也决定了状态存储的“位置”框架载体形态状态存储机制载体与状态的关系React函数useState的 Hook 链状态存在函数组件的“调用顺序”中不在函数代码块本身Compose函数remember的状态槽状态存在组合的调用点中不在函数代码块本身Flutter类的方法State对象状态存在StatefulWidget的State对象中不在build()代码块中SwiftUI结构体AttributeGraph 属性节点状态存在框架的属性图中由视图身份索引不在结构体中ArkUI结构体框架状态管理状态由State等装饰器管理与组件绑定关键洞察在所有框架中状态都不在代码块“里面”。载体代码块是 UI 界面的“设计图”状态被框架单独管理。React 把状态存在 Hook 调用顺序里SwiftUI 把状态存在 AttributeGraph 的属性节点里Flutter 把状态存在 State 对象里——代码块只是读取状态、产出描述。设计图本身不存状态状态在框架的“档案柜”里。6.3 纯粹性约束所有框架都要求载体执行“纯粹”——相同的输入产出相同的 UI 描述。React 官方文档的定义是“所有 React 组件必须像纯函数一样对待其 props。这意味着给定相同的输入props组件应该始终返回相同的输出。”纯函数让 React 能够优化渲染。Compose 官方文档的警告是“切勿依赖执行可组合函数产生的副作用因为函数的重组可能被跳过。如果你这样做用户可能会在你的应用中经历奇怪和不可预测的行为。”Flutter 的build方法文档明确警告“此方法可能每帧都被调用除了构建 widget 外不应有任何副作用。”ArkUI 文档则从另一个角度给出了约束“不能在自定义组件的 build() 或 Builder 方法里直接改变状态变量这可能会造成循环渲染的风险。”6.4 三种载体形态对比总结载体形态框架实际代码结构核心特征函数React、Composefunction Foo()/Composable fun Foo()函数代码块直接产出 UI 描述组件身份即函数类的方法Flutterclass Foo { Widget build() }类持有组件身份build()代码块是描述出口结构体的属性/方法SwiftUI、ArkUIstruct Foo: View { var body }/Component struct Foo { build() }结构体是声明载体body/build代码块是描述出口更准确的表述是声明式 UI 的实际载体是一段“接收状态、返回 UI 描述”的代码块。这段代码块是 UI 界面的“设计图”不是 UI 本身。至于这段代码块被声明为函数、类的方法、还是结构体的计算属性是语言层面的选择。这个选择影响组件身份识别方式和状态存储机制但不影响载体层面的统一状态变化 → 代码块重新执行 → 产出新描述 → 框架对比更新底层实际显示在屏幕上的UI界面。七、习题15 道题目 1选择题React 官方文档对函数组件的定义是A. 写类类返回 UIB. 接受 props 并返回 React 元素的 JavaScript 函数C. 写命令命令操作 UID. 写模板模板渲染 UI参考答案B解读React 官方文档的表述是“函数组件是 JavaScript 函数接受单个 props 对象参数返回一个 React 元素。” 载体是函数代码块本身。题目 2判断题声明式 UI 的载体在所有框架中都是“函数”。参考答案错误解读载体有三种形态。React、Compose 用函数代码块Flutter 用类的方法代码块SwiftUI、ArkUI 用结构体。题目 3填空题Compose 官方文档指出可组合函数______返回任何内容因为它们______所需的屏幕状态而不是构造界面 widget。参考答案不需要描述解读Compose 文档原文“此函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容因为它们描述所需的屏幕状态而不是构造界面 widget。”题目 4简答题为什么 Flutter 的build()方法放在State上而不是StatefulWidget上参考答案Flutter 官方文档解释这给开发者更大的灵活性避免闭包隐式捕获this导致的 bug。如果build定义在StatefulWidget上闭包会捕获当前的 widget 实例不可变当 widget 更新时闭包仍然引用旧数据放在State上闭包捕获的是State实例它在重建之间保持存活框架会更新其widget属性以引用新实例。题目 5代码分析题下面 ArkUI 代码有什么问题Componentstruct Counter{Statecount:number0build(){Text(Count:${this.count})}}参考答案在build()代码块中直接改变状态变量。ArkUI 文档明确警告“不能在自定义组件的 build() 或 Builder 方法里直接改变状态变量这可能会造成循环渲染的风险。” 每次 build 执行都会改变count触发新的 build导致无限循环或性能问题。题目 6代码改错题下面 React 代码有什么问题function Counter() { const [count, setCount] useState(0) if (count 5) { const [msg, setMsg] useState() } return Text{count}/Text }参考答案在条件语句中调用useState违反 Hooks 规则。React 靠调用顺序识别状态条件调用会打乱顺序。useState返回的状态“在函数退出时不会消失——它们被 React 保留下来”但保留机制依赖于调用顺序的稳定性。题目 7跨载体对比题写出 React 和 SwiftUI 中计数器的核心写法并指出共同点和关键差异。参考答案Reactconst [count, setCount] useState(0) Button title1 onPress{() setCount(count 1)} /SwiftUIStateprivatevarcount0Button(1){count1}共同点都持有状态、都通过事件改状态、都由状态决定 UI、都不手动操作控件。关键差异React 必须调setCount显式触发状态更新SwiftUI 直接改变量State包装器拦截写入。React 的函数代码块直接返回 JSXSwiftUI 通过body计算属性代码块返回 View。SwiftUI 的State存储在 AttributeGraph 的属性节点中由视图身份索引。题目 8选择题ArkUI 中创建组件时需要使用new关键字吗A. 需要B. 不需要C. 取决于组件类型D. 只有在自定义组件中需要参考答案B解读ArkUI 文档明确说明“创建组件不需要使用 new 关键字。”题目 9判断题返回 UI 描述的代码块可以自由发网络请求。参考答案错误解读Flutter 的build方法文档明确警告“此方法可能每帧都被调用除了构建 widget 外不应有任何副作用。” Compose 文档同样警告切勿依赖执行可组合函数产生的副作用。React 文档也强调组件必须像纯函数一样对待 props。题目 10填空题React 中通过 ______ 实现插槽ArkUI 中通过 ______ 实现插槽SwiftUI 中通过 ______ 实现插槽Compose 中通过 ______ 实现插槽。参考答案childrenBuilderParamViewBuildercontent: Composable () - Unit题目 11简答题从“载体”角度解释为什么 SwiftUI 用结构体而不是函数参考答案SwiftUI 的底层机制是 AttributeGraph。视图结构体是“轻量级设计图”会被频繁重新创建但它在 AttributeGraph 中的“属性节点”保持了身份和状态。结构体是值类型天然不可变State在 AttributeGraph 的属性节点中分配存储由视图身份索引。从载体看body就是一个“返回 UI 描述”的计算属性代码块与函数载体的函数代码块等价。题目 12代码分析题下面 Flutter 代码的载体是什么它与 React 的函数组件有何异同classGreetingextendsStatelessWidget{finalStringname;overrideWidgetbuild(BuildContextcontext){returnText(Hello,$name);}}参考答案载体是类的方法代码块——Greeting类持有name配置build()方法代码块返回 Widget 描述。Flutter 的build文档说明它“描述此 widget 所代表的用户界面的一部分”框架用返回的 widget 替换子树。与 React 函数组件的相同点都是“接收状态、返回 UI 描述”的代码块。不同点Flutter 把组件身份放在类上React 把身份放在函数代码块本身Flutter 的build()可能每帧被调用必须无副作用。题目 13设计题设计UserCard组件输入name、avatar、online写出 React 版本并指出派生数据。参考答案function UserCard({ name, avatar, online }) { const dotColor online ? green : gray // 派生数据 const statusText online ? 在线 : 离线 // 派生数据 return ( View Image source{avatar} / Text{name}/Text View style{{ backgroundColor: dotColor }} / Text{statusText}/Text /View ) }题目 14设计题设计List组件输入items空时显示“暂无数据”写出 React 版本并说明 key 的作用。参考答案function List({ items }) { if (items.length 0) { return Text暂无数据/Text } return ( View {items.map((item, i) ( Text key{item.id}{i 1}. {item.text}/Text ))} /View ) }key 的作用标识元素身份帮助框架在对比新旧描述时正确匹配元素。Compose 文档对此有精确描述“如果从同一个调用点多次调用某个可组合项Compose 就无法唯一标识对该可组合项的每次调用因此除了调用点之外还会使用执行顺序来区分实例。key 可组合项可以用来告诉运行时您要使用哪些值来标识树的给定部分。”题目 15思考题从“载体”角度为什么说“声明式 UI 就是创建代码块返回 UI 描述”参考答案无论函数载体、类的方法载体还是结构体载体你最终创建的都是一个“接收状态、返回 UI 描述”的代码块。这段代码块是 UI 界面的“设计图”不是 UI 本身。函数载体React 官方定义为“接受 props 并返回 React 元素的 JavaScript 函数”类的方法载体Flutter 的build文档说明它“描述此 widget 所代表的用户界面的一部分”框架用返回的 widget 替换子树结构体载体SwiftUI 的body是“通过返回另一个 View 值来定义外观和行为”ArkUI 的build函数“定义组件的声明式 UI 描述”三者都遵循同一渲染管线状态变化 → 重新执行代码块 → 得到新描述 → 框架对比新旧描述 → 更新底层实际显示在屏幕上的UI界面。设计图不存状态状态在框架的档案柜里。这就是载体的统一。八、下节预告第 3 课声明式UI的状态管理