在开发电商首页、购物车、列表卡片等复杂页面时，页面中存在大量重复的样式、重复的UI结构、统一的交互逻辑。如果全部手写，会出现代码冗余、样式不统一、后期维护成本极高的问题。样式复用、UI结构复用、自定义组件复用，配合父子组件数据通信机制，能够实现高内聚、低耦合的前端开发模式，也是企业级鸿蒙项目模块化开发的基础。单纯的结构复用只能解决代码冗余问题，想要实现数据驱动UI更新，必须依靠组件状态通信机制。

在开发电商首页、购物车、列表卡片等复杂页面时，页面中存在大量重复的样式、重复的UI结构、统一的交互逻辑。如果全部手写，会出现代码冗余、样式不统一、后期维护成本极高的问题。样式复用、UI结构复用、自定义组件复用，配合父子组件数据通信机制，能够实现高内聚、低耦合的前端开发模式，也是企业级鸿蒙项目模块化开发的基础。单纯的结构复用只能解决代码冗余问题，想要实现数据驱动UI更新，必须依靠组件状态通信机制。

当函数作为参数传递（回调函数）时，必须给它定义类型，否则 TS 会报错。2.用type泛型是 TS 中最核心的特性之一，一开始我也觉得很难懂，现在终于理清了基础用法。定义可复用的结构value: T;实现通用数据结构（比如栈）// 类型为 number | undefined。

Set 可以存储对象，必须用接口（interface）// 定义用户接口id: number;// 创建存储 User 类型的 Set{ id: 1, name: "张三" },{ id: 2, name: "李四" },]);// 添加元素（必须符合 User 类型）userSet.add({ id: 3, name: "王五" });// 遍历对象 Set});

只影响编译时的类型检查，不会改变运行时的实际值；不到万不得已，不要随便用!，它是 “兜底方案”，不是 “首选方案”；能用可选链?或逻辑判断解决的问题，就别用非空断言。isis谓词只能在函数返回值中使用，不能直接写在if判断里；类型守卫函数的判断逻辑，必须和实际数据的类型匹配，否则会出现编译通过但运行时出错的情况；处理复杂联合类型时，is谓词比as强制类型断言安全得多，优先使用。{ path: '/

{x, y}背景图左上角的位置，单位为pxText('背景图自定义位置').backgroundImagePosition({ x: 100, y: 50 }) // 图片左上角在(100,50)位置Text('自定义背景图大小').backgroundImageSize({ width: 100, height: 80 }) // 图片固定为100×80。

核心区别：普通变量仅初始化渲染一次，修改后页面不更新；@State状态变量会被框架监听，数据变更自动刷新 UI@State是做交互页面的基础，几乎所有带点击、切换效果的页面都需要用到开发时做好区分，静态数据用普通变量，动态变化的数据使用@State，兼顾代码简洁和页面性能快速PPT 生成更多。

核心区别：普通变量仅初始化渲染一次，修改后页面不更新；@State状态变量会被框架监听，数据变更自动刷新 UI@State是做交互页面的基础，几乎所有带点击、切换效果的页面都需要用到开发时做好区分，静态数据用普通变量，动态变化的数据使用@State，兼顾代码简洁和页面性能快速PPT 生成更多。

子组件总宽度超出 Row 容器宽度时，justifyContent 会失效解决：给子组件设置允许自动压缩，或者缩小子组件尺寸justifyContent 只作用于直接子组件，嵌套内层组件不生效Row 主轴水平、Column 主轴垂直，不要记反；交叉轴对齐用 alignItems三个均匀分配枚举速记：SpaceBetween：两头贴边，中间分空隙SpaceAround：元素自带左右留白，中间双倍间距

子组件总宽度超出 Row 容器宽度时，justifyContent 会失效解决：给子组件设置允许自动压缩，或者缩小子组件尺寸justifyContent 只作用于直接子组件，嵌套内层组件不生效Row 主轴水平、Column 主轴垂直，不要记反；交叉轴对齐用 alignItems三个均匀分配枚举速记：SpaceBetween：两头贴边，中间分空隙SpaceAround：元素自带左右留白，中间双倍间距