求指点：关于ListItem的渲染和生命周期的疑问

import { JSON } from '@kit.ArkTS';

interface TaskItem {
  title: string
  selected: boolean
}

@Extend(Checkbox)
function checkBoxStyle(selected: boolean) {
  .width(20)
  .height(20) // 方形的checkBox
  .shape(CheckBoxShape.ROUNDED_SQUARE) // 选中的颜色
  .selectedColor(Color.Orange)
  .select(selected)
}

@Entry
@Component
struct TodoListDemo {
  @State taskText: string = '';
  @State @Watch('taskListChange') taskList: Array<TaskItem> = [
    {
      title: '敲代码1',
      selected: false
    },
    {
      title: '敲代码2',
      selected: false
    },
    {
      title: '敲代码3',
      selected: false
    },
  ];
  @State selectedAll: boolean = false;
  @State completed: number = 0;
  @State unfinished: number = this.taskList.length;

  taskListChange() {
    this.completed = this.taskList.filter(item => item.selected === true).length
    this.unfinished = this.taskList.length - this.completed
    this.selectedAll = this.unfinished === 0
    console.log('selectedAll：' + this.selectedAll)
    console.log('list：' + JSON.stringify(this.taskList))
  }

  build() {
    Column({ space: 10 }) {
      TextInput({ placeholder: '请输入任务后,按回车确定', text: this.taskText })
        .fontColor(Color.Gray)
        .onSubmit((type, event) => {
          this.taskList.push({
            title: event.text,
            selected: false
          })
        })

      List() {
        ForEach(this.taskList, (task: TaskItem, index: number) => {
          ListItem() {
            Row() {
              // Checkbox()
              //   .checkBoxStyle(task.selected)
              //   .onChange(select => {
              //     this.taskList = this.taskList.map((item, _index) => {
              //       _index === index && (item.selected = select)
              //       return item
              //     })
              //   })
              Checkbox()
                .checkBoxStyle(task.selected)
                .onChange(select => {
                  task.selected = select
                  this.taskListChange()
                })

              Text(task.title)
                .fontSize(20)
                .width('100%')
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .padding(20)
          }
          .onAppear(()=>{
            console.log("onappear");
          })
          .border({
            width: 1
          })
        })
      }

      Row() {
        Row() {
          Checkbox()
            .checkBoxStyle(this.selectedAll)
            .onClick(() => {
              this.selectedAll = !this.selectedAll
              this.taskList = this.taskList.map((task) => {
                task.selected = this.selectedAll
                return task
              })
            })

          Text() {
            Span('全选  已完成' + `${this.completed}`)
            Span('，未完成' + `${this.unfinished}`)
          }
        }

        Button('清除已完成任务')
          .backgroundColor(Color.Red)
          .fontColor(Color.White)

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')

  }
}