组件内部尝试模拟页面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(, (isVisible: boolean, currentRatio: number) => {
console.log("子组件isVisible：", isVisible)
console.log("子组件currentRatio：", currentRatio)
})
}
}
}
[*]结果：
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]