组件可见区域变化事件onVisibleAreaChange踩过的坑

​应用市场详情页面，视频轮播图卡片，要求当视频滑动到屏幕可见区域之外时，要停止播放。实现这个功能，首先就想到了​​​​组件可见区域变化事件onVisibleAreaChange​​​​。但是在开发过程中，踩过如下的坑：当在video视频组件上挂载onVisibleAreaChange事件，当视频播放时，会无限高频触发onVisibleAreaChange事件（即使手指离开设备，不做任何操作）。

经过反复验证，发现当视频暂停播放时，视频组件可见区域变化事件onVisibleAreaChange监听正常，符合预期。只有当视频播放时，才会无限高频触发onVisibleAreaChange监听事件。猜想，通过对Text标签的内容动态定时器修改，并对Text标签挂载组件可见区域变化事件onVisibleAreaChange（如下代码），会有怎样的效果呢？结果发现同样也会触发高频触发onVisibleAreaChange事件。因此认为当Text标签内容变动/或者Video标签视频播放（即帧渲染时），都是会触发组件可见区域变化事件onVisibleAreaChange的。

@State des: string = ""; 
async aboutToAppear() { 
  setInterval(()=>{ 
    this.des=Date.now()+""; 
  }, 100) 
} 
 
Text(this.des) 
  .fontSize(20) 
  .width('100%') 
  .height('100%') 
  .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 
    Logger.info(TAG, `onVisibleAreaChange isVisible=${isVisible}, currentRatio=${currentRatio}`); 
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

经过确认，当存在页面重新构建刷新时，都会触发onVisibleAreaChange ，因为在代码逻辑中，video的点击事件中，有触发@State修饰的响应式数据变量存在修改，从而导致页面组件刷新，进而引起触发onVisibleAreaChange。

那么如何跳过这个坑呢？

既然组件可见区域变化事件onVisibleAreaChange，挂载在内容可变的Text/Video等标签上，会高频触发可能导致影响后续的处理逻辑，那么就把内容可变的Text/Video等标签包裹一层同等大小的容器（如Row,Column等），在把这个容器上挂载组件可见区域变化事件onVisibleAreaChange。

注意：即使在Video标签外包裹了一层同等大小的容器，并在这个容器上挂载组件可见区域变化事件onVisibleAreaChange，但当视频暂停/播放时，仍会各自触发一次挂载在容器组件的onVisibleAreaChange事件，触发@State修饰的响应式数据变量存在修改，从而导致页面组件刷新，进而引起触发onVisibleAreaChange。