期末考试复习总结-《从简单的页面开始（上）》

一、知识点总结

1. ArkUI框架核心能力

• 框架定位：提供声明式UI语法、组件库、布局动画及实时预览工具，支持跨设备开发。
• 技术架构：
  • 前端层：声明式UI语法、状态管理（@State等装饰器）。
  • 引擎层：渲染管线、组件状态管理、布局计算。
  • 平台层：适配不同OS，抹平接口差异。
• 组件分类：
  • 基础组件：Text、Button、Image等。
  • 布局容器：Row、Column、List、Grid等。
  • 导航组件：Navigation、Tabs。

2. 声明式UI范式

• 与命令式区别：
  • 声明式仅描述UI最终状态，框架自动处理渲染细节；命令式需手动操作UI元素。
• 组件构建：
  • 创建：无参数组件直接调用（如Divider()），有参数组件需传入参数（如Image(src)）。
  • 属性配置：链式调用（如.fontSize(20).backgroundColor(Color.Red)）。
  • 事件绑定：.onClick(() => {})，支持箭头函数或成员函数（需bind this）。

3. 生命周期管理

• 页面生命周期（@Entry组件）：
  • onPageShow：页面显示时触发（如路由切换、应用切前台）。
  • onPageHide：页面隐藏时触发（如路由切换、应用切后台）。
  • onBackPress：返回按钮点击时触发。
• 组件生命周期（@Component组件）：
  • aboutToAppear：组件创建后、build前触发。
  • onDidBuild：build执行完成后触发。
  • aboutToDisappear：组件销毁前触发。

4. 条件渲染与循环渲染

• if/else条件渲染：
  • 支持状态变量或常规变量，条件变化时重新渲染对应分支。
  • 案例：根据count值显示不同文本。
• ForEach循环渲染：
  • 键值规则：需唯一键值（默认用索引+内容，建议用对象ID）。
  • 组件更新：数据源变化时，键值存在则复用组件，否则新建。
  • 场景：列表渲染、骨架屏展示。

二、思维导图

三、模拟考试题

1. 单选题（10题×3分=30分）

1. ArkUI框架的核心开发范式是（ ）
   A. 命令式
   B. 声明式
   C. 函数式
   D. 面向对象
   答案：B

2. 以下属于页面生命周期的回调是（ ）
   A. aboutToAppear
   B. onDidBuild
   C. onPageShow
   D. aboutToDisappear
   答案：C

3. ForEach循环渲染的键值生成规则默认使用（ ）
   A. 数组索引
   B. 元素内容
   C. 索引+内容
   D. 对象ID
   答案：C

4. 声明式UI中，配置组件属性的正确方式是（ ）
   A. Text('Hello').fontSize=20
   B. Text('Hello').fontSize(20)
   C. Text('Hello').setFontSize(20)
   D. Text.setFontSize('Hello', 20)
   答案：B

5. 以下组件中属于布局容器的是（ ）
   A. Text
   B. Button
   C. Column
   D. Image
   答案：C

6. 自定义组件销毁前触发的回调是（ ）
   A. onPageHide
   B. aboutToDisappear
   C. onDestroy
   D. onBackPress
   答案：B

7. 条件渲染中，无法触发UI更新的变量类型是（ ）
   A. @State
   B. 常规变量
   C. @Link
   D. @Prop
   答案：B

8. ArkUI不支持的开发范式是（ ）
   A. 声明式（ArkTS）
   B. 类Web（HML+CSS+JS）
   C. 混合开发（ArkTS+C++）
   D. 纯Java开发
   答案：D

9. 循环渲染中，为确保组件复用，应使用（ ）作为键值
   A. 数组索引
   B. 元素内容
   C. 对象唯一ID
   D. 随机字符串
   答案：C

10. 事件绑定中，推荐的写法是（ ）
    A. onClick(this.handler)
    B. onClick(this.handler.bind(this))
    C. onClick(() => this.handler())
    D. onClick(handler)
    答案：C

2. 判断题（10题×1分=10分）

1. 声明式UI需要手动操作DOM更新。（ ）
   答案：×

2. @Entry装饰的组件可以调用页面生命周期。（ ）
   答案：√

3. ForEach循环中，键值重复会导致渲染异常。（ ）
   答案：√

4. 组件属性配置必须使用枚举类型。（ ）
   答案：×（也可使用常量）

5. aboutToAppear在组件build之后触发。（ ）
   答案：×（build之前）

6. 条件渲染中，else分支不可省略。（ ）
   答案：×

7. ArkUI支持实时预览，编辑时同步更新。（ ）
   答案：√

8. 页面跳转时，原页面一定会被销毁。（ ）
   答案：×（取决于路由方式）

9. 自定义组件可以监听页面生命周期。（ ）
   答案：√（通过uiObserver）

10. 循环渲染中，修改数组元素子属性需用@Observed装饰类。（ ）
    答案：√

3. 简答题（4题×5分=20分）

1. 简述声明式UI与命令式UI的核心区别。
   参考答案：

   • 声明式UI只需描述UI最终状态，框架自动处理渲染细节（如数据驱动更新）；
   • 命令式UI需手动编写UI创建、更新、删除的具体操作，逻辑与状态混杂。

2. 列出页面生命周期的三个主要回调及其触发场景。
   参考答案：

   • onPageShow：页面显示时触发（路由切换、应用切前台）；
   • onPageHide：页面隐藏时触发（路由切换、应用切后台）；
   • onBackPress：用户点击返回按钮时触发。

3. 说明ForEach循环渲染中键值生成的重要性。
   参考答案：

   • 键值用于唯一标识组件，确保数据源变化时：
     • 键值存在则复用组件，提升性能；
     • 键值不存在则新建组件，避免渲染错误。

4. 简述ArkUI框架的三层架构及作用。
   参考答案：

   • 前端层：提供声明式UI语法、组件库、状态管理；
   • 引擎层：处理渲染管线、布局计算、组件状态更新；
   • 平台层：适配不同操作系统，抹平接口差异。

4. 程序填空题（2题×10分=20分）

题目1：补全条件渲染代码，根据isLogin显示不同组件。

@Entry 
@Component
struct LoginPage {
  @State isLogin: boolean = false;

  build() {
    Column() {
      if (______) { // 补全条件
        Text('已登录').fontSize(20);
      } else {
        Button('登录').onClick(() => {
          this.isLogin = true;
        });
      }
    }
  }
}

答案：this.isLogin

题目2：补全ForEach循环渲染，使用id作为键值。

@Entry @Component
struct UserList {
  @State users: Array<{ id: string, name: string }> = [
    { id: '1', name: '张三' },
    { id: '2', name: '李四' }
  ];

  build() {
    List() {
      ForEach(this.users, (item) => {
        ListItem() {
          Text(item.name).fontSize(18);
        }
      }, ______) // 补全键值生成
    }
  }
}

答案：(item) => item.id

5. 编程题（2题×10分=20分）

题目1：使用ForEach渲染待办事项列表，点击事项标记完成（添加删除线）。
参考代码：

@Entry 
@Component
struct TodoList {
  @State todos: Array<{ id: string, content: string, isDone: boolean }> = [
    { id: '1', content: '学习鸿蒙', isDone: false },
    { id: '2', content: '完成作业', isDone: false }
  ];

  build() {
    Column() {
      Text('待办事项').fontSize(24).fontWeight(700);
      List() {
        ForEach(this.todos, (item) => {
          ListItem() {
            Text(item.content)
              .fontSize(20)
              .decoration({
                type: item.isDone ? TextDecorationType.LineThrough : TextDecorationType.None
              })
              .onClick(() => {
                // 找到对应项并更新状态
                const index = this.todos.findIndex(t => t.id === item.id);
                if (index !== -1) {
                  this.todos[index].isDone = !this.todos[index].isDone;
                }
              });
          }
        }, (item) => item.id);
      }
    }
    .width('100%')
    .padding(10);
  }
}

题目2：实现页面生命周期监听，在控制台输出回调顺序。
参考代码：

@Entry @Component
struct LifeCyclePage {
  // 页面生命周期
  onPageShow() {
    console.info('页面显示 onPageShow');
  }

  onPageHide() {
    console.info('页面隐藏 onPageHide');
  }

  onBackPress() {
    console.info('返回按钮点击 onBackPress');
    return true; // 自己处理返回逻辑
  }

  // 组件生命周期
  aboutToAppear() {
    console.info('组件即将出现 aboutToAppear');
  }

  onDidBuild() {
    console.info('组件build完成 onDidBuild');
  }

  aboutToDisappear() {
    console.info('组件即将销毁 aboutToDisappear');
  }

  build() {
    Column() {
      Text('生命周期演示').fontSize(24);
      Button('跳转到下一页')
        .onClick(() => {
          // 路由跳转触发onPageHide
        });
    }
    .width('100%')
    .height('100%');
  }
}

评分要点：生命周期回调的正确使用、路由跳转触发隐藏、控制台输出逻辑。