鸿蒙状态管理：用樱花般的优雅，构建灵动应用原创

雾起茶山时

发布于 2025-3-27 22:49

浏览

0收藏

🌸 用樱花般的优雅，构建灵动应用 🌸

🌸 初识鸿蒙状态管理：像樱花一样轻盈的起点

作为一名刚接触鸿蒙开发的女生，我曾被复杂的代码吓到过。但当我发现状态管理就像打理一束樱花——看似繁琐，实则充满规律时，一切都变得温柔起来。鸿蒙的ArkTS语言提供了多种状态管理工具，比如@State、@Prop、@Link，它们像樱花的不同花瓣，各自绽放却共同组成绚烂的风景。

1. @State：让数据像樱花一样自然流动

@State是状态管理的起点，它像樱花的花蕊，虽小却能引发整个花朵的绽放。用@State装饰的变量，会在变化时自动触发UI更新。比如一个简单的计数器：

@Entry@Component  
struct CounterComponent {  
  @State count: number = 0; // 像樱花初绽，初始值为0  

  build() {  
    Column() {  
      Text(`Count: ${this.count}`).fontSize(24);  
      Button('+1').onClick(() => {  
        this.count++; // 点击后，樱花飘落般自然更新  
      });  
    }  
  }  
}

这里，@State让count成为组件的“心跳”，每次点击都像风吹动樱花，UI随之摇曳。

2. @Prop：父子的郁金香接力棒

如果说@State是独立绽放的樱花，@Prop则像郁金香的花茎，将父组件的状态传递给子组件。它是单向的，如同郁金香只向上生长：

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @State message: string = "Hello from Parent!"; // 父的郁金香  

  build() {  
    Column() {  
      ChildComponent({ childMsg: this.message }); // 将花茎递给子组件  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Prop childMsg: string; // 子接过郁金香  

  build() {  
    Text(this.childMsg); // 静静展示  
  }  
}

子组件无法修改@Prop的值，就像郁金香不会逆生长，这保证了数据的清晰流向。

3. @Link：双向绑定的并蒂莲

需要父子组件同步更新时，@Link就像并蒂莲，两朵花共享同一根系。修改任一方，另一方随之变化：

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @State score: number = 90; // 父的根系  

  build() {  
    Column() {  
      ChildComponent({ linkScore: this.score }); // 传递根系  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Link linkScore: number; // 子连接根系  

  build() {  
    Button('扣分').onClick(() => {  
      this.linkScore -= 10; // 点击后，两朵花同时凋零10分  
    });  
  }  
}

这种双向同步，让交互如并蒂莲般和谐。

🌷 跨组件共享：像郁金香花田一样广阔

当应用变得复杂，组件层级加深时，层层传递状态就像在花田中迷路。鸿蒙提供了更优雅的方案——@Provide/@Consume和LocalStorage。

1. @Provide与@Consume：花田中的捷径小径

父组件用@Provide“种下”状态，子组件用@Consume直接“采摘”，无需绕路：

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @Provide theme: string = "light"; // 种下主题  

  build() {  
    Column() {  
      ChildComponent();  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Consume theme: string; // 直接采摘  

  build() {  
    Text(`当前主题：${this.theme}`);  
  }  
}

这种方式让代码像花田中的小径，简洁又直接。

2. LocalStorage：页面级的花房管理

LocalStorage适合单个页面内共享状态，像一个小花房，所有组件都能闻到同一朵花的香气：

// 创建花房  
let storage = new LocalStorage({ "username": "小樱" });  

// 组件A  
@Component  
struct ComponentA {  
  @LocalStorageProp('username') name: string = ""; // 只读花香  

  build() {  
    Text(`欢迎，${this.name}`);  
  }  
}  

// 组件B  
@Component  
struct ComponentB {  
  @LocalStorageLink('username') name: string = ""; // 可修改花香  

  build() {  
    Button('改名').onClick(() => {  
      this.name = "小葵"; // 修改后，整个花房同步  
    });  
  }  
}

🌺 持久化与设备环境：让数据如樱花年年绽放

应用重启后，如何让数据不丢失？PersistentStorage像樱花树的年轮，默默记录一切；Environment则像天气，让应用适应不同环境。

1. PersistentStorage：年轮般的持久记忆

将AppStorage中的数据存入磁盘，即使应用凋谢，明年春天仍能绽放：

PersistentStorage.persistProp('userScore', 100); // 刻入年轮  

@Entry@Component  
struct GameComponent {  
  @StorageLink('userScore') score: number; // 读取年轮  

  build() {  
    Text(`得分：${this.score}`);  
  }  
}

2. Environment：随风而动的智能适应

根据系统语言或深色模式自动调整UI，像樱花根据季节变换颜色：

Environment.envProp('language', 'zh'); // 读取系统语言  

@Entry@Component  
struct SettingsPage {  
  @StorageProp('language') lang: string;  

  build() {  
    Text(this.lang === 'zh' ? '你好' : 'Hello'); // 智能问候  
  }  
}

🌼 复杂数据处理：像编织樱花手环一样细致

面对嵌套对象或数组时，@Observed和@ObjectLink像编织手环的丝线，确保每片花瓣都被固定。

1. @Observed：标记需要关注的花瓣

用@Observed装饰类，框架才会监听其属性变化：

@Observed  
class User {  
  name: string;  
  age: number;  
  // 每片花瓣都被观察  
}

2. @ObjectLink：双向绑定的丝线

子组件用@ObjectLink绑定父组件的对象，实现深度同步：

@Component  
struct ChildComponent {  
  @ObjectLink user: User;  

  build() {  
    Button('长大一岁').onClick(() => {  
      this.user.age++; // 修改后，父组件同步更新  
    });  
  }  
}