递归的基本介绍

什么是递归？一个函数（方法），在其方法体中进行调用自己的写法就是递归。作用是可以用来做无限层级数据的处理和展示。

1.基本用法

1.1.无限递归

在使用的过程中，要避免无限递归，不然会导致编译器崩溃。 如：

// 没有退出条件的 递归函数--无限递归
function func(){
  func()
}


// 无限递归 - 完整写法
function func(){
  console.log('递归调用')
  func()
}

// 主动调用
func()

这就是一个典型的无限递归。

1.2.递归必须有退出条件

例如：输入一个数字，然后打印这个数字的份数。

/*
 * 有一个函数接受一个参数值，根据这个值来决定打印次数
 * printFn(2)
 *
 *  ✨✨总结：
 * 一个正常的递归函数因该包含如下两个特点：
 * 1. 函数内部调自己
 * 2. 在函数内部调自己之前要有判断来决定调不调
 * */

function printFn(num: number) {
  console.log(`打印第${num}次`)
  // 将num自减1
  num--

  // 判断如果num的值>0继续调用自己（递归推出条件）
  if (num > 0) {
    printFn(num)------>调用函数自己
  }
}

printFn(2)


@Entry
@Component
struct Index {
  build() {
    Column() {

    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

2.案例-盖楼评论

如图：

如果要实现上面的这种类似的布局，若采用for来进行循环，可能会导致多个for进行循环，那么这个时候就体现出了递归的作用。

interface iComment {
  level: number //评论层级
  avatar: string //头像
  name: string //评论人
  content: string //评论内容
  childComment?: iComment // 子评论
}


@Entry
@Component
struct Index {
  comment: iComment =
    {
      level: 0,
      avatar: 'app.media.ic_avatar_113',
      name: '软媒新友',
      content: '鸿蒙PC版本操作系统赶紧上市',
      childComment: {
        level: 1,
        avatar: 'app.media.ic_avatar_116',
        name: '星河',
        content: '赶紧上市，不然美国又来一次蓝屏',
        childComment: {
          level: 2,
          avatar: 'app.media.ic_avatar_142',
          name: '夜幕',
          content: '点反对的，怕是不知道美国干的这事很少？'
        }
      }
    }

  @Builder
  gen(data: iComment) {
    Column() {
      Row({ space: 10 }) {
        Image($r(data.avatar))
          .height(25)

        Text(data.name)
          .layoutWeight(1)
      }

      Text(data.content)
        .width('100%')
    }
    .margin({ top: 10, left: 10 * data.level })


    //退出条件，当对象数组里面还有childComment时，则继续调用自己
    if (data.childComment) {
    //进行调用自己
      this.gen(data.childComment)
    }
  }

  build() {
    Column() {
    
    //调用@Builder构建的样式
      this.gen(this.comment)
    }
    .height('100%')
    .width('100%')
  }
}