组件内部尝试模拟页面onPageShow
<h2 id="尝试在父组件中改变子组件ui中未用到的状态变量失败">尝试在父组件中改变子组件UI中未用到的状态变量【失败】</h2><blockquote>
<p>一个页面入口文件，一个组件<br>
子组件用@Prop不行，用@Link也不行<br>
<img src="https://img2024.cnblogs.com/blog/1800322/202504/1800322-20250428161124849-265568389.png" alt="image" loading="lazy"></p>
</blockquote>
<details>
<summary>点击查看 Index.ets 代码</summary>
<pre><code>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%')
}
}
</code></pre>
</details>
<details>
<summary>点击查看 text01.ets 代码</summary>
<pre><code>@Component
export struct Text01 {
@Link aa: boolean
@State tex: string = '我没有改变'
aboutToAppear(): void {
if (this.aa) {
this.tex = '我被改变了'
}
}
build() {
Column() {
Text(this.tex)
}
}
}
</code></pre>
</details>
<h2 id="尝试使用onareachange事件失败">尝试使用onAreaChange事件【失败】</h2>
<blockquote>
<p>一个组件，两个页面入口文件<br>
Page02.ets文件内容为默认内容，创建之后没有修改<br>
使用router跳转至其他页面，再返回该页面，没有触发onAreaChange事件<br>
<img src="https://img2024.cnblogs.com/blog/1800322/202504/1800322-20250428162942105-1059134798.png" alt="image" loading="lazy"></p>
</blockquote>
<details>
<summary>点击查看 Index.ets 代码</summary>
<pre><code>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%')
}
}
</code></pre>
</details>
<details>
<summary>点击查看 text01.ets 代码</summary>
<pre><code>@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))
})
}
}
}
</code></pre>
</details>
<h2 id="使用onpageshow方法更新子组件ui失败">使用onPageShow方法，更新子组件UI【失败】</h2>
<blockquote>
<p>一个组件，两个页面入口文件<br>
Page02.ets文件内容为默认内容，创建之后没有修改<br>
使用router跳转至其他页面，再返回该页面，触发入口页面组件的onPageShow方法<br>
<img src="https://img2024.cnblogs.com/blog/1800322/202504/1800322-20250428162942105-1059134798.png" alt="image" loading="lazy"></p>
</blockquote>
<details>
<summary>点击查看 Index.ets 代码</summary>
<pre><code>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%')
}
}
</code></pre>
</details>
<details>
<summary>点击查看 text01.ets 代码</summary>
<pre><code>@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))
})
}
}
}
</code></pre>
</details>
<blockquote>
<ul>
<li>在自定义组件首次渲染时，会记录状态变量与组件的映射关系，当状态变量发生变化时，驱动其相关的组件刷新</li>
<li>框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行更新函数，实现最小化更新</li>
<li>我以前还以为触发子组件重新渲染，就会重新触发子组件的aboutToAppear方法，这是不对的。<br>
aboutToAppear方法的触发，只有在创建子组件实例时触发，其余时间不会再次触发。</li>
</ul>
</blockquote>
<h2 id="ifelse成功">if...else【成功】</h2>
<blockquote>
<p>有损性能，能少用就少用，通过合理的业务逻辑规划，最大程度的减少该方法使用<br>
一个组件，两个页面入口文件<br>
Page02.ets文件内容为默认内容，创建之后没有修改<br>
使用router跳转至其他页面，再返回该页面，触发入口页面组件的onPageShow方法与onPageHide方法</p>
</blockquote>
<details>
<summary>点击查看 Index.ets 代码</summary>
<pre><code>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%')
}
}
</code></pre>
</details>
<details>
<summary>点击查看 text01.ets 代码</summary>
<pre><code>@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))
})
}
}
}
</code></pre>
</details>
<h2 id="onvisibleareachange成功">onVisibleAreaChange【成功】</h2>
<blockquote>
<p>官方文档<br>
该方法由这位同学教我，在此感谢该同学</p>
<ul>
<li>组件可见区域发生变化时触发该回调<br>
<img src="https://img2024.cnblogs.com/blog/1800322/202504/1800322-20250428162942105-1059134798.png" alt="image" loading="lazy"></li>
</ul>
</blockquote>
<details>
<summary>点击查看 Index.ets 代码</summary>
<pre><code>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%')
}
}
</code></pre>
</details>
<details>
<summary>点击查看 text01.ets 代码</summary>
<pre><code>@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)
})
}
}
}
</code></pre>
</details>
<blockquote>
<ul>
<li>结果：<br>
<img src="https://img2024.cnblogs.com/blog/1800322/202505/1800322-20250501090429957-1402887090.png" alt="image" loading="lazy"></li>
</ul>
</blockquote><br><br>
来源：https://www.cnblogs.com/miao-tan/p/18851862
頁:
[1]