ArkTS 进阶之道26LocalStorageLink/LocalStorageProp 页面级状态绑定边界——为啥双向绑定 vs 单向只读本文是「ArkTS 进阶之道」系列第 26 篇续「ArkUI 状态联动」深水区。上篇讲 StorageLink/StorageProp 应用级状态绑定边界双向绑定 vs 单向只读。本文讲页面级状态绑定边界LocalStorageLink 双向绑定 vs LocalStorageProp 单向只读——根因在页面级双向绑定槽 vs 单向只读槽。能力系列篇 26 讲过 LocalStorageLink/LocalStorageProp 怎么用本文讲为哈 LocalStorageLink 双向绑定合法 LocalStorageProp 单向只读组件不能改——根因在页面级双向绑定槽 vs 单向只读槽。一、开篇LocalStorageLink 不是单向只读是双向绑定 LocalStorage 键你写 React 时页面级状态绑定是「useState 魔法」组件卸载 state 销毁// React 页面级状态绑定useState组件卸载 state 销毁 function Comp() { const [count, setCount] useState(0) // 页面级 state 双向 return button onClick{() setCount(count 1)}count{count}/button } // React 页面级状态绑定useState 双向组件卸载 state 销毁不跨页面共享你写鸿蒙 ArkTS 时LocalStorageLink双向绑定 LocalStorage 键——组件改互同步// ArkTS LocalStorageLink 双向绑定 LocalStorage 键 interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct LinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定改互同步 build() { Button(localCount${this.localCount}) .onClick(() { this.localCount }) // ✅ 组件改 → LocalStorage 同步 → 同页面其他组件同步 } } // LocalStorageLink 双向绑定 LocalStorage 键组件改 → LocalStorage 同步 → 同页面其他组件同步双向useState 魔法 vs 页面级双向绑定槽的区别React 把页面级状态绑定当 useState 魔法组件卸载 state 销毁ArkTS 把 LocalStorageLink 当「页面级双向绑定槽」组件改互同步。根因不是 useState 魔法是页面级双向绑定槽——LocalStorageLink 双向绑定 LocalStorage 键组件改 → LocalStorage 同步 → 同页面其他组件同步双向。二、根因LocalStorageLink/LocalStorageProp 的页面级双向绑定槽 vs 单向只读槽机制鸿蒙 ArkUI 的 LocalStorageLink/LocalStorageProp 是页面级状态绑定槽——LocalStorageLink 双向绑定槽LocalStorageProp 单向只读槽来自三重绑定机制。机制 1LocalStorageLink 双向绑定 LocalStorage 键——组件改互同步LocalStorageLink 荬饰器双向绑定 LocalStorage 键——组件改 → LocalStorage 同步 → 同页面其他组件同步双向interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct LinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定改互同步 build() { Column() { Text(localCount ${this.localCount}) Button(改 localCount) .onClick(() { this.localCount }) // ✅ 组件改 → LocalStorage 同步 → 同页面其他组件同步 } } } // LocalStorageLink 双向绑定 LocalStorage 键组件改 → LocalStorage 同步 → 同页面其他组件同步双向LocalStorageLink 双向绑定 LocalStorage 键LocalStorageLinklocalCount荬饰器双向绑定 LocalStorage 键——组件改localCount→ LocalStorage 同步 → 同页面其他组件同步双向。根因不是单向只读是页面级双向绑定槽——LocalStorageLink 双向绑定 LocalStorage 键组件改互同步双向。机制 2LocalStorageProp 单向只读绑定——LocalStorage 改组件同步组件不能改LocalStorageProp 荬饰器单向只读绑定——LocalStorage 改 → 组件同步组件改只改本地副本不回传interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct PropComp { LocalStorageProp(localCount) localCount: number 0 // ⚠ LocalStorageProp 单向只读组件不能改 build() { Column() { Text(localCount ${this.localCount}只读组件不能改) Button(试改 localCount) .onClick(() { // ⚠ LocalStorageProp 只读改只改组件本地副本不回传 LocalStorage单向只读 this.localCount // ⚠ 只改本地副本LocalStorage 不同步其他组件不同步 }) } } } // LocalStorageProp 单向只读绑定LocalStorage 改 → 组件同步组件改只改本地副本不回传LocalStorageProp 单向只读绑定LocalStorageProplocalCount荬饰器单向只读绑定——LocalStorage 改localCount→ 组件同步组件改localCount只改本地副本不回传 LocalStorage。根因不是双向同步是页面级单向只读槽——LocalStorageProp 单向只读绑定LocalStorage 改组件同步组件改不回传。机制 3LocalStorageLink vs LocalStorageProp 边界——双向绑定 vs 单向只读LocalStorageLink双向绑定组件改互同步LocalStorageProp单向只读LocalStorage 改组件同步组件改不回传——根因都是绑定 LocalStorage 键但绑的机制不同interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) // ✅ LocalStorageLink 路径双向绑定组件改 → LocalStorage 同步 → 同页面其他组件同步双向 Component struct LinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定 build() { Button(LinkComp ${this.localCount}) .onClick(() { this.localCount }) // ✅ 组件改 → LocalStorage 同步 → 其他组件同步 } } // ⚠ LocalStorageProp 路径单向只读LocalStorage 改 → 组件同步组件改不回传 Component struct PropComp { LocalStorageProp(localCount) localCount: number 0 // ⚠ LocalStorageProp 单向只读 build() { Button(PropComp ${this.localCount}) .onClick(() { this.localCount }) // ⚠ 改只改本地副本LocalStorage 不同步 } } // LocalStorageLink vs LocalStorageProp 边界双向绑定改互同步vs 单向只读组件改不回传LocalStorageLink vs LocalStorageProp 边界LocalStorageLink 路径——双向绑定组件改 → LocalStorage 同步 → 同页面其他组件同步双向推荐组件要改用。LocalStorageProp 路径——单向只读LocalStorage 改 → 组件同步组件改只改本地副本不回传推荐组件只读用。根因都是绑定 LocalStorage 键但绑的机制不同——LocalStorageLink 页面级双向绑定槽改互同步LocalStorageProp 页面级单向只读槽组件改不回传。机制 4LocalStorageLink/LocalStorageProp vs StorageLink/StorageProp 边界——页面级 vs 应用级LocalStorageLink/LocalStorageProp页面级绑定LocalStorage 页面卸载就销毁StorageLink/StorageProp应用级绑定AppStorage 所有页面共享——根因都是绑定状态存储但绑的作用域不同// ✅ LocalStorageLink/LocalStorageProp 路径页面级绑定LocalStorage 页面卸载就销毁 const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct LocalLinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ 页面级双向绑定页面卸载就销毁 build() { Button(页面级 ${this.localCount}).onClick(() { this.localCount }) } } // ✅ 页面级绑定同页面多组件共享页面卸载就销毁单页面用 LocalStorage // ⚠ StorageLink/StorageProp 路径应用级绑定AppStorage 所有页面共享 AppStorage.setOrCreate(appCount, 0) Entry Component struct AppLinkComp { StorageLink(appCount) appCount: number 0 // ⚠ 应用级双向绑定所有页面共享 build() { Button(应用级 ${this.appCount}).onClick(() { this.appCount }) } } // ⚠ 应用级绑定所有页面共享页面卸载状态仍存在跨页面用 AppStorageLocalStorageLink/LocalStorageProp vs StorageLink/StorageProp 边界LocalStorageLink/LocalStorageProp 路径——页面级绑定LocalStorage 页面卸载就销毁单页面用。StorageLink/StorageProp 路径——应用级绑定AppStorage 所有页面共享跨页面用。根因都是绑定状态存储但绑的作用域不同——LocalStorageLink/LocalStorageProp 页面级绑定槽页面卸载就销毁StorageLink/StorageProp 应用级绑定槽跨页面共享。三、真机配图LocalStorageLink/LocalStorageProp 页面级状态绑定边界——双向 vs 只读初始态LinkComp localCount0 葝色双向、PropComp localCount0 橙色只读均绑定边界初始态齐点调三按钮后LinkComp localCount88 葝色被 LocalStorage.set 直接改 88 覆盖、PropComp localCount88 橙色只读同步、LocalStorageLink 双向 vs LocalStorageProp 只读边界证据齐对比证据点 LinkComp 改 localCount 后 LocalStorage 同步LocalStorageLink 双向点 PropComp 试改 localCount 后只改本地副本不回传LocalStorageProp 只读点直接改 LocalStorage.set(“localCount”, 88) 后 LinkComp PropComp 都同步 88LocalStorage 是源。LocalStorageLink 双向绑定 vs LocalStorageProp 单向只读——LocalStorageLink 绑定 LocalStorage 键改互同步双向LocalStorageProp 绑定 LocalStorage 键只读组件改不回传。四、真解法LocalStorageLink/LocalStorageProp 页面级状态绑定的三个场景场景 1LocalStorageLink 双向绑定计数器90% 场景首选组件要改用双向interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct LinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定改互同步 build() { Column() { Text(localCount ${this.localCount}) Button(改 localCount) .onClick(() { this.localCount }) // ✅ 组件改 → LocalStorage 同步 → 同页面其他组件同步 } } }为哈能跑LocalStorageLink 双向绑定计数器——页面级双向绑定槽LocalStorageLinklocalCount双向绑定 LocalStorage 键组件改localCount→ LocalStorage 同步 → 同页面其他组件同步双向。首选这个90% 的场景组件要改页面级状态用 LocalStorageLink 双向绑定槽就够。要写「组件改页面级状态计数器等」时用这个——不用 LocalStorageProp 单向只读组件改不回传LocalStorageLink 双向绑定改互同步。场景 2LocalStorageProp 单向只读绑定展示组件只读用单向LocalStorage 改组件同步interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) Component struct PropComp { LocalStorageProp(localCount) localCount: number 0 // ⚠ LocalStorageProp 单向只读组件不能改 build() { Text(localCount ${this.localCount}只读展示组件不能改) // ✅ LocalStorage 改 → 组件同步只读展示 } } // LocalStorageProp 单向只读绑定展示LocalStorage 改 → 组件同步只读展示组件不能改为哈能跑LocalStorageProp 单向只读绑定展示——页面级单向只读槽LocalStorageProplocalCount单向只读绑定 LocalStorage 键LocalStorage 改localCount→ 组件同步只读展示组件不能改。要写「组件只读展示页面级状态只读展示等」时用这个——不用 LocalStorageLink 双向绑定组件改会回传LocalStorageProp 单向只读组件不能改。场景 3LocalStorageLink LocalStorageProp 混用改组件用双向只读组件用单向只读interface LocalState { localCount: number } const localStorage new LocalStorage({ localCount: 0 } as LocalState) // ✅ 改组件用 LocalStorageLink 双向绑定组件改 → LocalStorage 同步 Component struct EditComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定改互同步 build() { TextInput({ text: ${this.localCount}, placeholder: 输入值 }) .onChange((value: string) { this.localCount parseInt(value) || 0 }) // ✅ 改 → LocalStorage 同步 } } // ✅ 只读组件用 LocalStorageProp 单向只读LocalStorage 改 → 组件同步只读展示 Component struct ShowComp { LocalStorageProp(localCount) localCount: number 0 // ✅ LocalStorageProp 单向只读组件不能改 build() { Text(只读展示 localCount ${this.localCount}) // ✅ LocalStorage 改 → 组件同步只读展示 } } // LocalStorageLink LocalStorageProp 混用改组件用 LocalStorageLink 双向只读组件用 LocalStorageProp 单向只读为哈能跑LocalStorageLink LocalStorageProp 混用——改组件用 LocalStorageLink 双向绑定组件改 → LocalStorage 同步只读组件用 LocalStorageProp 单向只读LocalStorage 改 → 组件同步只读展示。要写「改组件 只读组件混用编辑 展示等」时用这个——改组件用 LocalStorageLink 双向只读组件用 LocalStorageProp 单向只读。五、一句话哲学LocalStorageLink 不是单向只读是双向绑定 LocalStorage 键的改互同步LocalStorageProp 是单向只读的组件不能改。ArkUI 的 LocalStorageLink 荬饰器双向绑定 LocalStorage 键组件改互同步双向。根因不是单向只读是页面级双向绑定槽——LocalStorageLink 双向绑定 LocalStorage 键组件改 → LocalStorage 同步 → 同页面其他组件同步双向 LocalStorageProp 单向只读绑定LocalStorage 改 → 组件同步组件改只改本地副本不回传 LocalStorageLink vs LocalStorageProp 边界双向绑定 vs 单向只读 LocalStorageLink/LocalStorageProp vs StorageLink/StorageProp 边界页面级 vs 应用级。对比 React 页面级状态绑定 useState 魔法组件卸载 state 销毁ArkTS LocalStorageLink 页面级双向绑定槽改互同步。状态联动深水区串讲Watch 绑 State 变触发副作用回调槽篇 68 Link $ 语法双向绑定跨组件同步篇 69 Provide/Consume 跨层级传递槽祖辈后辈同步篇 70 Observed/ObjectLink 嵌套对象观测槽子属性改刷 UI篇 71 AppStorage 应用级状态存储槽所有页面共享篇 72 LocalStorage 页面级状态存储槽同页面多组件共享篇 73 StorageLink/StorageProp 应用级状态绑定边界双向 vs 只读篇 74 LocalStorageLink/LocalStorageProp 页面级状态绑定边界双向 vs 只读篇 75LocalStorageLink 双向绑定 vs LocalStorageProp 单向只读——续「ArkUI 状态联动」深水区讲状态联动深水区Watch 呙作用回调槽边界 Link $ 语法双向绑定边界 Provide/Consume 跨层级传递槽边界 Observed/ObjectLink 嵌套对象观测槽边界 AppStorage 应用级状态存储槽边界 LocalStorage 页面级状态存储槽边界 StorageLink/StorageProp 应用级状态绑定边界 LocalStorageLink/LocalStorageProp 页面级状态绑定边界。系列预告下篇篇 76讲状态管理装饰器全景边界V1/V2 双轨根因续「ArkUI 状态联动」深水区。五阶段哲学体系类型哲学50-52→ 作用域哲学53-55→ 状态哲学56-59→ 渎染哲学60-62→ 组件设计63-67→ 状态联动深水区68讲清 ArkTS/ArkUI 进阶哲学。能力系列回链能力系列篇本文进阶点篇 26 LocalStorageLink/LocalStorageProp 用法LocalStorageLink/LocalStorageProp 页面级状态绑定边界根因双向绑定 vs 单向只读篇 24 LocalStorage 用法页面级状态存储槽边界同页面多组件共享页面卸载就销毁篇 59 Watch 用法状态联动深水区Watch 呇作用回调槽 vs onClick 直接调副作用边界真机 demo 完整代码// 篇 75 demoLocalStorageLink/LocalStorageProp 页面级状态绑定边界 // LocalStorageLink 双向绑定 LocalStorage 键改互同步vs LocalStorageProp 单向只读组件不能改 interface LocalState { localCount: number; localTheme: string } const localStorage new LocalStorage({ localCount: 0, localTheme: #52C41A } as LocalState) // ✅ LocalStorageLink 双向绑定组件改互同步组件改 → LocalStorage 同步LocalStorage 改 → 组件同步 Component struct LinkComp { LocalStorageLink(localCount) localCount: number 0 // ✅ LocalStorageLink 双向绑定 build() { Column({ space: 6 }) { Text(组件 LinkCompLocalStorageLink 双向绑定) .fontSize(11).fontColor(#2563eb).fontWeight(FontWeight.Bold) Text(localCount ${this.localCount}).fontSize(13).fontColor(#2563eb) Button(LinkComp 改 localCountLocalStorageLink 双向组件改 → LocalStorage 同步) .width(92%).height(36).fontSize(10) .onClick(() { this.localCount }) // ✅ 组件改 → LocalStorage 同步 → 同页面其他组件同步 } .width(92%).padding(8).backgroundColor(#e0f0ff).borderRadius(6) } } // ⚠ LocalStorageProp 单向只读绑定组件LocalStorage 改 → 组件同步组件不能改只读 Component struct PropComp { LocalStorageProp(localCount) localCount: number 0 // ⚠ LocalStorageProp 单向只读 build() { Column({ space: 6 }) { Text(组件 PropCompLocalStorageProp 单向只读) .fontSize(11).fontColor(#ff6600).fontWeight(FontWeight.Bold) Text(localCount ${this.localCount}只读组件不能改).fontSize(13).fontColor(#ff6600) Button(PropComp 试改 localCountLocalStorageProp 只读改不回传 LocalStorage) .width(92%).height(36).fontSize(10) .onClick(() { // ⚠ LocalStorageProp 只读改只改组件本地副本不回传 LocalStorage单向只读 this.localCount // ⚠ 只改本地副本LocalStorage 不同步其他组件不同步 }) } .width(92%).padding(8).backgroundColor(#fff0e0).borderRadius(6) } } Entry Component struct Index { State log: string (未操作) build() { Column({ space: 12 }) { Text(篇 75 配图LocalStorageLink/LocalStorageProp 页面级状态绑定边界) .fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 16, bottom: 4 }) Text(LocalStorageLink 双向绑定改互同步vs LocalStorageProp 单向只读组件不能改) .fontSize(10).fontColor(#888).margin({ bottom: 8 }) LinkComp() PropComp() // ✅ 直接改 LocalStorageLocalStorageLink 同步LocalStorageProp 也同步 Button(直接改 LocalStorage.set(localCount, 88)) .width(92%).height(40).fontSize(12) .onClick(() { localStorage.set(localCount, 88) // ✅ LocalStorage 改 → LocalStorageLink LocalStorageProp 同步 this.log LocalStorage.set localCount88LocalStorageLink LocalStorageProp 都同步 }) Text(日志${this.log}).fontSize(10).fontColor(#333).margin({ top: 4 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }写鸿蒙 ArkUI 记住LocalStorageLink 不是单向只读是双向绑定 LocalStorage 键的改互同步——LocalStorageLink 荬饰器双向绑定 LocalStorage 键组件改互同步双向。根因不是单向只读是页面级双向绑定槽——LocalStorageLink 双向绑定 LocalStorage 键组件改 → LocalStorage 同步 → 同页面其他组件同步双向 LocalStorageProp 单向只读绑定LocalStorage 改 → 组件同步组件改只改本地副本不回传 LocalStorageLink vs LocalStorageProp 边界双向绑定 vs 单向只读 LocalStorageLink/LocalStorageProp vs StorageLink/StorageProp 边界页面级 vs 应用级。LocalStorageLink 双向绑定计数器用页面级双向绑定槽首选90% 场景LocalStorageProp 单向只读绑定展示用页面级单向只读槽组件不能改LocalStorageLink LocalStorageProp 混用改组件用 LocalStorageLink 双向只读组件用 LocalStorageProp 单向只读。页面级双向绑定 vs 单向只读是 ArkUI 状态联动深水区核心
