HarmonyOS 使用NodeContainer包装的子组件，在NodeConainer卸载的时候子组件不会走aboutToDisappear？

Question

同一个组件，使用NodeContainer包装这个组件，在NodeConainer卸载的时候子组件不会走aboutToDisappear

Answer 1

没有dispose导致这个buttonNode还被一个js对象所持有，这个buttonNode和下面的子节点都一直被引用着，没能被真正释放。

可以在MyNodeController中的aboutToDisappear调用 this.buttonNode.dispose()

相关文档地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-rendernode-0000001861966389-V5\#ZH-CN\_TOPIC\_0000001861966389\_\_dispose12

代码：

import { BuilderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State private myNodeVC?: MyNodeController = undefined
  @State isShow: boolean = true

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.isShow = !this.isShow
          if (this.myNodeVC) {
            this.myNodeVC = undefined
          } else {
            this.myNodeVC = new MyNodeController()
          }
        })

      if (this.myNodeVC) {
        NodeContainer(this.myNodeVC)
          .id('nodeContainer')
          .width(300)
          .height(300)
          .alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center },
            top: { anchor: 'HelloWorld', align: VerticalAlign.Bottom }
          })
          .backgroundColor(Color.Red)
      }
    }
    .height('100%')
    .width('100%')
  }
}

class Params {
  title?: string
}

class MyNodeController extends NodeController {
  aboutToDisappear(): void {
    this.buttonNode?.dispose()
    console.log('MyNodeController aboutToDisappear')
  }

  aboutToAppear(): void {
    console.log('MyNodeController aboutToAppear')
  }

  private buttonNode: BuilderNode<[Params]> | null = null;
  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(createComponent);

  makeNode(uiContext: UIContext): FrameNode {
    if (this.buttonNode == null) {
      this.buttonNode = new BuilderNode(uiContext);
      this.buttonNode.build(this.wrapBuilder, { title: 'this is a button' })
    }
    return this.buttonNode!.getFrameNode()!;
  }
}

@Builder
function createComponent(param: Params) {
  TestComponent({ title: param.title })
    .width('100%')
    .height('100%')
}

@Component
struct TestComponent {
  title: string = ''

  aboutToAppear(): void {
    console.log('TestComponent aboutToAppear', this.title)
  }

  aboutToDisappear(): void {
    console.log('TestComponent aboutToDisappear', this.title)
  }

  build() {
    Column() {
      Text('title')
        .fontSize(50)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Blue)
  }
}