登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›组件内部尝试模拟页面onPageShow

组件内部尝试模拟页面onPageShow

佴莘莘 2025-5-31 23:46:26
尝试在父组件中改变子组件UI中未用到的状态变量【失败】

一个页面入口文件，一个组件
子组件用@Prop不行，用@Link也不行
1.png

点击查看 Index.ets 代码
  1. import { Text01 } from './text01'
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State aa: boolean = false
  8.   build() {
  9.     Column() {
  10.       Text01({ aa: this.aa })
  11.       Button('改变状态变量')
  12.         .onClick(() => {
  13.           this.aa = true
  14.         })
  15.     }
  16.     .height('100%')
  17.     .width('100%')
  18.   }
  19. }
复制代码
点击查看 text01.ets 代码
  1. @Component
  2. export struct Text01 {
  3.   @Link aa: boolean
  4.   @State tex: string = '我没有改变'
  6.   aboutToAppear(): void {
  7.     if (this.aa) {
  8.       this.tex = '我被改变了'
  9.     }
  10.   }
  12.   build() {
  13.     Column() {
  14.       Text(this.tex)
  15.     }
  16.   }
  17. }
复制代码
尝试使用onAreaChange事件【失败】

一个组件，两个页面入口文件
Page02.ets文件内容为默认内容，创建之后没有修改
使用router跳转至其他页面，再返回该页面，没有触发onAreaChange事件
2.png

点击查看 Index.ets 代码
  1. import { Text01 } from './text01'
  2. import { router } from '@kit.ArkUI'
  4. @Entry
  5. @Component
  6. struct Index {
  7.   build() {
  8.     Column() {
  9.       Text01()
  10.       Button('跳转至Page02')
  11.         .onClick(() => {
  12.           router.pushUrl({
  13.             url: 'pages/Page02'
  14.           })
  15.         })
  16.     }
  17.     .height('100%')
  18.     .width('100%')
  19.   }
  20. }
复制代码
点击查看 text01.ets 代码
  1. @Component
  2. export struct Text01 {
  3.   @State tex: string = '我没有改变'
  5.   build() {
  6.     Column() {
  7.       Text(this.tex)
  8.         .onAreaChange((oldValue: Area, newValue: Area) => {
  9.           console.log("aaa", JSON.stringify(oldValue))
  10.           console.log("aaa", JSON.stringify(newValue))
  11.         })
  12.     }
  13.   }
  14. }
复制代码
使用onPageShow方法，更新子组件UI【失败】

一个组件，两个页面入口文件
Page02.ets文件内容为默认内容，创建之后没有修改
使用router跳转至其他页面，再返回该页面，触发入口页面组件的onPageShow方法
3.png

点击查看 Index.ets 代码
  1. import { Text01 } from './text01'
  2. import { router } from '@kit.ArkUI'
  4. @Entry
  5. @Component
  6. struct Index {
  7.   @State aa: number = 0
  9.   onPageShow(): void {
  10.     this.aa++
  11.     console.log("aa", this.aa)
  12.     // aa可以改变，没有问题
  13.   }
  15.   build() {
  16.     Column() {
  17.       Text01({ aa: this.aa })
  18.       Button('跳转至Page02')
  19.         .onClick(() => {
  20.           router.pushUrl({
  21.             url: 'pages/Page02'
  22.           })
  23.         })
  24.     }
  25.     .height('100%')
  26.     .width('100%')
  27.   }
  28. }
复制代码
点击查看 text01.ets 代码
  1. @Component
  2. export struct Text01 {
  3.         @Prop aa: number = 0
  4.         @State tex: string = '我没有改变'
  6.         aboutToAppear(): void {
  7.                 if (this.aa == 2) {
  8.                         this.tex = '我该变为2'
  9.                 }
  10.         }
  12.         build() {
  13.                 Column() {
  14.                         Text(`${this.aa}`)
  15.                         Text(this.tex)
  16.                                 .onAreaChange((oldValue: Area, newValue: Area) => {
  17.                                         console.log("aaa", JSON.stringify(oldValue))
  18.                                         console.log("aaa", JSON.stringify(newValue))
  19.                                 })
  20.                 }
  21.         }
  22. }
复制代码


  • 在自定义组件首次渲染时，会记录状态变量与组件的映射关系，当状态变量发生变化时，驱动其相关的组件刷新
  • 框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行更新函数，实现最小化更新
  • 我以前还以为触发子组件重新渲染，就会重新触发子组件的aboutToAppear方法，这是不对的。
    aboutToAppear方法的触发，只有在创建子组件实例时触发，其余时间不会再次触发。
if...else【成功】

有损性能，能少用就少用，通过合理的业务逻辑规划，最大程度的减少该方法使用
一个组件，两个页面入口文件
Page02.ets文件内容为默认内容，创建之后没有修改
使用router跳转至其他页面，再返回该页面，触发入口页面组件的onPageShow方法与onPageHide方法
点击查看 Index.ets 代码
  1. import { Text01 } from './text01'
  2. import { router } from '@kit.ArkUI'
  4. @Entry
  5. @Component
  6. struct Index {
  7.         @State aa: number = 0
  8.         @State bol: boolean = true
  10.         onPageShow(): void {
  11.                 this.aa++
  12.                 console.log("aa", this.aa)
  13.                 // aa可以改变，没有问题
  14.                 this.bol = true
  15.         }
  17.         onPageHide(): void {
  18.                 this.bol = false
  19.         }
  21.         build() {
  22.                 Column() {
  23.                         if (this.bol) {
  24.                                 Text01({ aa: this.aa })
  25.                         }
  26.                         Button('跳转至Page02')
  27.                                 .onClick(() => {
  28.                                         router.pushUrl({
  29.                                                 url: 'pages/Page02'
  30.                                         })
  31.                                 })
  32.                 }
  33.                 .height('100%')
  34.                 .width('100%')
  35.         }
  36. }
复制代码
点击查看 text01.ets 代码
  1. @Component
  2. export struct Text01 {
  3.         @Prop aa: number = 0
  4.         @State tex: string = '我没有改变'
  6.         aboutToAppear(): void {
  7.                 if (this.aa == 2) {
  8.                         this.tex = '我该变为2'
  9.                 }
  10.         }
  12.         build() {
  13.                 Column() {
  14.                         Text(`${this.aa}`)
  15.                         Text(this.tex)
  16.                                 .onAreaChange((oldValue: Area, newValue: Area) => {
  17.                                         console.log("aaa", JSON.stringify(oldValue))
  18.                                         console.log("aaa", JSON.stringify(newValue))
  19.                                 })
  20.                 }
  21.         }
  22. }
复制代码
onVisibleAreaChange【成功】

官方文档
该方法由这位同学教我，在此感谢该同学

  • 组件可见区域发生变化时触发该回调
    4.png

点击查看 Index.ets 代码
  1. import { Text01 } from './text01'
  2. import { router } from '@kit.ArkUI'
  4. @Entry
  5. @Component
  6. struct Index {
  7.   build() {
  8.     Column() {
  9.       Text01()
  10.       Button('跳转至Page02')
  11.         .onClick(() => {
  12.           router.pushUrl({
  13.             url: 'pages/Page02'
  14.           })
  15.         })
  16.     }
  17.     .height('100%')
  18.     .width('100%')
  19.   }
  20. }
复制代码
点击查看 text01.ets 代码
  1. @Component
  2. export struct Text01 {
  3.   @State tex: string = '子组件'
  5.   build() {
  6.     Column() {
  7.       Text(this.tex)
  8.         .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
  9.           console.log("子组件isVisible：", isVisible)
  10.           console.log("子组件currentRatio：", currentRatio)
  11.         })
  12.     }
  13.   }
  14. }
复制代码


  • 结果：
    5.png


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
佴莘莘
2025-5-31 23:46:26

0

粉丝关注

22

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫