组件内部尝试模拟页面onPageShow-牛翰网

尝试在父组件中改变子组件UI中未用到的状态变量【失败】

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

点击查看 Index.ets 代码

import { Text01 } from './text01'

@Entry
@Component
struct Index {
  @State aa: boolean = false

  build() {
    Column() {
      Text01({ aa: this.aa })
      Button('改变状态变量')
        .onClick(() => {
          this.aa = true
        })
    }
    .height('100%')
    .width('100%')
  }
}

点击查看 text01.ets 代码

@Component
export struct Text01 {
  @Link aa: boolean
  @State tex: string = '我没有改变'

  aboutToAppear(): void {
    if (this.aa) {
      this.tex = '我被改变了'
    }
  }

  build() {
    Column() {
      Text(this.tex)
    }
  }
}

尝试使用onAreaChange事件【失败】

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

点击查看 Index.ets 代码

import { Text01 } from './text01'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text01()
      Button('跳转至Page02')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Page02'
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

点击查看 text01.ets 代码

@Component
export struct Text01 {
  @State tex: string = '我没有改变'

  build() {
    Column() {
      Text(this.tex)
        .onAreaChange((oldValue: Area, newValue: Area) => {
          console.log("aaa", JSON.stringify(oldValue))
          console.log("aaa", JSON.stringify(newValue))
        })
    }
  }
}

使用onPageShow方法，更新子组件UI【失败】

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

点击查看 Index.ets 代码

import { Text01 } from './text01'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State aa: number = 0

  onPageShow(): void {
    this.aa++
    console.log("aa", this.aa)
    // aa可以改变，没有问题
  }

  build() {
    Column() {
      Text01({ aa: this.aa })
      Button('跳转至Page02')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Page02'
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

点击查看 text01.ets 代码

@Component
export struct Text01 {
	@Prop aa: number = 0
	@State tex: string = '我没有改变'

	aboutToAppear(): void {
		if (this.aa == 2) {
			this.tex = '我该变为2'
		}
	}

	build() {
		Column() {
			Text(`${this.aa}`)
			Text(this.tex)
				.onAreaChange((oldValue: Area, newValue: Area) => {
					console.log("aaa", JSON.stringify(oldValue))
					console.log("aaa", JSON.stringify(newValue))
				})
		}
	}
}

在自定义组件首次渲染时，会记录状态变量与组件的映射关系，当状态变量发生变化时，驱动其相关的组件刷新

框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行更新函数，实现最小化更新

我以前还以为触发子组件重新渲染，就会重新触发子组件的aboutToAppear方法，这是不对的。
aboutToAppear方法的触发，只有在创建子组件实例时触发，其余时间不会再次触发。

if…else【成功】

有损性能，能少用就少用，通过合理的业务逻辑规划，最大程度的减少该方法使用
一个组件，两个页面入口文件
Page02.ets文件内容为默认内容，创建之后没有修改
使用router跳转至其他页面，再返回该页面，触发入口页面组件的onPageShow方法与onPageHide方法

点击查看 Index.ets 代码

import { Text01 } from './text01'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
	@State aa: number = 0
	@State bol: boolean = true

	onPageShow(): void {
		this.aa++
		console.log("aa", this.aa)
		// aa可以改变，没有问题
		this.bol = true
	}

	onPageHide(): void {
		this.bol = false
	}

	build() {
		Column() {
			if (this.bol) {
				Text01({ aa: this.aa })
			}
			Button('跳转至Page02')
				.onClick(() => {
					router.pushUrl({
						url: 'pages/Page02'
					})
				})
		}
		.height('100%')
		.width('100%')
	}
}

点击查看 text01.ets 代码

@Component
export struct Text01 {
	@Prop aa: number = 0
	@State tex: string = '我没有改变'

	aboutToAppear(): void {
		if (this.aa == 2) {
			this.tex = '我该变为2'
		}
	}

	build() {
		Column() {
			Text(`${this.aa}`)
			Text(this.tex)
				.onAreaChange((oldValue: Area, newValue: Area) => {
					console.log("aaa", JSON.stringify(oldValue))
					console.log("aaa", JSON.stringify(newValue))
				})
		}
	}
}

onVisibleAreaChange【成功】

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

组件可见区域发生变化时触发该回调

点击查看 Index.ets 代码

import { Text01 } from './text01'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text01()
      Button('跳转至Page02')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Page02'
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

点击查看 text01.ets 代码

@Component
export struct Text01 {
  @State tex: string = '子组件'

  build() {
    Column() {
      Text(this.tex)
        .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
          console.log("子组件isVisible：", isVisible)
          console.log("子组件currentRatio：", currentRatio)
        })
    }
  }
}