【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（十）

课程地址： 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发

（本篇笔记对应课程第 17 节）

P17《16.Ark-状态管理@Prop @Link @Provide @Consume》

将上一节写出的代码进行功能模块封装：1、任务进度卡片为一个组件；2、新增任务按钮与任务列表展示为一个组件

1、任务进度卡片抽取为一个组件
在这里插入图片描述

2、使用这个组件并传递参数，此时 struct PropPage为父组件， TaskStatistics 为子组件。传递参数这里报错了：因为父组件和子组件里同时都用 @State 装饰器声明了同样的变量。

在这里插入图片描述

将子组件中声明变量前的 @State 去掉，发现不报错了：

在这里插入图片描述

此时发现父组件中数据变化了，但子组件并不知道这些数据变化了：

在这里插入图片描述

如需要父组件与子组件中的数据进行联动，就需要使用 @Prop 或者 @Link 装饰器。两者之间的区别是：@Prop 是数据的单向同步，即只会在父组件中修改数据影响子组件，反之不会；实现原理是将数据copy了一份传递给了子组件；而 @Link是数据的双向同步，父组件修改数据会影响子组件，子组件中修改数据也会影响父组件，实现原理是将数据的引用传递给了子组件，父组件与子组件修改的是同一份数据。

在这里插入图片描述

在子组件中的变量前加上@Prop 装饰，此时发现提示：**@Prop 修饰的变量不能再初始化。因为@Prop是期望父组件传递过来数据，所以不需要再自己初始化了。**删去初始化赋值。

在这里插入图片描述

此时发现任务管理子组件中的数据可以更新了。这样就实现了父组件到子组件的单向数据联动。

在这里插入图片描述

将新增任务与任务列表部分抽取为子组件：将其需要的state数据、操作数据的方法以及自定义的构建函数 deleteBtn 全部放到这个子组件中去，因为它使用到了这些功能：

在这里插入图片描述

在这里插入图片描述

使用这个子组件并且父组件中向其传递参数：

在这里插入图片描述

子组件中相应的数据改为 @Prop 声明：

在这里插入图片描述

由于需要在子组件中也改变 总任务数量与已完成任务数量的值，所以需要用 @Link 传递这两个数据：

在这里插入图片描述

此时发现父组件中传递数据报错了：

在这里插入图片描述

因为 @Link 需要传递一个引用给子组件，用变量前面加上 $ 的方式代表传递这个变量的引用，这样子组件对数据的修改父组件也可以感知到了：

在这里插入图片描述

如果子组件不需要对数据进行修改，只用数据做渲染展示，那么使用 @Prop 传递；如果子组件需要对数据进行修改，那么使用 @Link 传递。

官方文档中写 @Prop可以初始化，还写 @Prop 允许父组件是 数组，儿子是元素，但实际上是不行的！
在这里插入图片描述

验证一下对象类型：

在这里插入图片描述

用 @Prop 装饰一个对象类型数据，会发现有提示：@Prop 装饰的数据必须是 string、number、boolean类型。

在这里插入图片描述

在这里插入图片描述

@Link 是允许传递对象的：

在这里插入图片描述

在这里插入图片描述

@Link 支持传递对象类型，而@Prop不支持传递对象类型，但可以传递对象的属性。

@Provide 与 @Consume ：
在这里插入图片描述

父组件中改为 @Provide，子组件中改为 @Consume，此时发现报错了：

在这里插入图片描述

因为@Provide不需要显示传递参数，将传参去掉：

在这里插入图片描述

同时子组件中使用 @Consume 来接收：

在这里插入图片描述

@Prop 与 @Link 的选择：如果子组件不需要修改数据，只用数据来渲染展示，则使用 @Prop ；如果子组件需要修改数据，则使用 @Link。

@Provide @Consume 与 @Prop @Link 的选择：如果是父子组件传递，没必要使用@Provide @Consume ，因为它不需要显示传递参数，内部做了维护，肯定会造成一些性能的损耗；所以父子组件间传递尽量使用 @Prop @Link ；跨级组件传递可以使用 @Provide @Consume 。

注意：@Provide @Consume 祖组件与后代组件中传递的数据是双向同步的。

在这里插入图片描述

实践：

1、拆分子组件并使用 @Prop @Link 传递数据：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  @State totalTask:number = 0
  // 已完成任务数量
  @State finishTask:number = 0
  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics({ totalTask:this.totalTask, finishTask:this.finishTask })

        // 2、使用任务列表子组件
        TaskList({ totalTask:$totalTask, finishTask:$finishTask })

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  @Prop finishTask:number
  @Prop totalTask:number

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          value : this.finishTask,
          total : this.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  @Link totalTask:number
  // 已完成任务数量
  @Link finishTask:number
  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

2、验证 @Prop 不支持对象类型，仅支持对象属性的传递；而 @Link 支持传递对象类型：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

class Stat {
  // 总任务数量
  totalTask:number = 0
  // 已完成任务数量
  finishTask:number = 0
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  // @State totalTask:number = 0
  // 已完成任务数量
  // @State finishTask:number = 0

  @State stat:Stat = new Stat()

  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics({ totalTask:this.stat.totalTask, finishTask:this.stat.finishTask })

        // 2、使用任务列表子组件
        // TaskList({ totalTask:$totalTask, finishTask:$finishTask })
        TaskList({ stat:$stat })

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  @Prop finishTask:number
  @Prop totalTask:number

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          value : this.finishTask,
          total : this.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  // @Link totalTask:number
  // 已完成任务数量
  // @Link finishTask:number

  @Link stat:Stat
  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    // this.totalTask = this.tasks.length
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    // this.finishTask = this.tasks.filter(item => item.finished).length
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

3、使用 @Provide 和 @Consume：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

class Stat {
  // 总任务数量
  totalTask:number = 0
  // 已完成任务数量
  finishTask:number = 0
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  // @State totalTask:number = 0
  // 已完成任务数量
  // @State finishTask:number = 0

  // @State stat:Stat = new Stat()
  @Provide stat:Stat = new Stat()

  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics()

        // 2、使用任务列表子组件
        // TaskList({ totalTask:$totalTask, finishTask:$finishTask })
        TaskList()

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  /*@Prop finishTask:number
  @Prop totalTask:number*/

  @Consume stat:Stat

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          /*value : this.finishTask,
          total : this.totalTask,*/
          value : this.stat.finishTask,
          total : this.stat.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          /*Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)*/
          Text(this.stat.finishTask.toString())
          Text(`/${this.stat.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  // @Link totalTask:number
  // 已完成任务数量
  // @Link finishTask:number

  // @Link stat:Stat
  @Consume stat:Stat

  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    // this.totalTask = this.tasks.length
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    // this.finishTask = this.tasks.filter(item => item.finished).length
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/658822.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JAVA学习路线图

JAVA学习路线图

计算机网课资料分享群：710895979
阅读更多...
简单的 Cython 示例

简单的 Cython 示例

1&#xff0c; pyx文件 fibonacci.pyx def fibonacci_old(n):if n < 0:return 0elif n 1:return 1else:return fibonacci_old(n-1) fibonacci_old(n-2) 2&#xff0c;setup.py setup.py from setuptools import setup from Cython.Build import cythonizesetup(ext_mod…
阅读更多...
冯喜运：5.24黄金今日能否回调？日内国际黄金美原油操作策略

冯喜运：5.24黄金今日能否回调？日内国际黄金美原油操作策略

【黄金消息面分析】&#xff1a;在过去的半个世纪里&#xff0c;美国国债作为买入持有的投资手段&#xff0c;轻松超越了黄金。然而&#xff0c;如今债券作为终极避险资产的地位正面临着前所未有的挑战。传统上&#xff0c;投资者将美国国债视为一种超安全的投资&#xff0c;因…
阅读更多...
做好开源快速开发平台研发创新 助力行业高效发展！

做好开源快速开发平台研发创新 助力行业高效发展！

随着信息化时代的到来&#xff0c;科技的力量无处不在。为了提高办公效率&#xff0c;很多大中型企业倾向于使用更为先进的软件平台来助力企业降本增效。在众多助力神器之中&#xff0c;开源快速开发平台低代码技术平台深得广大新老客户朋友的喜爱&#xff0c;它与生俱来的优势…
阅读更多...
柔性自驱动生物“电子衣”促进伤口愈合

柔性自驱动生物“电子衣”促进伤口愈合

引用信息 文 章&#xff1a;Combined Amniotic Membrane and Self-Powered Electrical Stimulator Bioelectronic Dress Promotes Wound Healing 期 刊&#xff1a;ACS Applied Materials & Interfaces&#xff08;影响因子&#xff1a;9.5&#xff09; 发表时间…
阅读更多...
华为WLAN无线组网技术与解决方案

华为WLAN无线组网技术与解决方案

WLAN无线组网技术与解决方案 网络拓扑采用AP和AC旁挂式无线组网 配置思路&#xff1a; 1.让AP上线 1.1&#xff0c;使得AP能够获得IP地址 配置步骤&#xff1a; 1.把AC当作一个一个有管理功能的三层交换机 sys Enter system view, return user view with CtrlZ. [AC6605]vlan …
阅读更多...
10.时间片调度

10.时间片调度

一、简介 时间片调度主要针对优先级相同的任务&#xff0c;当多个任务的优先级相同时&#xff0c;任务调度器会在每 一次系统时钟节拍到的时候切换任务&#xff0c;也就是说 CPU 轮流运行优先级相同的任务&#xff0c;每个任务运 行的时间就是一个系统时钟节拍。 二、相关实…
阅读更多...
UIKit之猜图器Demo

UIKit之猜图器Demo

需求 实现猜图器Demo 功能分解&#xff1a; 1>下一题切换功能 2>点击图片后能放大并背景变暗&#xff08;本质是透明度的变化&#xff09;。再次点击则缩小&#xff0c;删除暗色背景。 3> 答案区按钮点击则文字消失&#xff0c;选择区对应文字恢复。 4> 选择区…
阅读更多...
记录一个截图导出pdf的方法

记录一个截图导出pdf的方法

以下是导出的方法&#xff1a; // 通过截图、分页、处理文字截断后从dom生成pdf并导出 import { nextTick } from vue import { BxmMessage } from bxm-ui3 import html2Canvas from html2canvas import JsPDF from jspdf/*** * param {*} dom 导出的模块* param {*} fileNam…
阅读更多...
Hive复杂数据类型之 Struct结构体

Hive复杂数据类型之 Struct结构体

想写这篇文章蛮久了&#xff0c;但这个数据类型&#xff0c;确实很少用&#xff0c;翻遍了代码库的所有代码&#xff0c;也没有找到。 但&#xff0c;之前分享过的 Hive复杂数据类型之 array 数组&#xff0c; Hive复杂数据类型之array数组_hive 建表设置array类型-CSDN博客 …
阅读更多...
Linux命令 jps（Java Process Status）解释

Linux命令 jps（Java Process Status）解释

文章目录 1、第一种解释2、第二种解释3、第三种解释 1、第一种解释 jps 命令本身并不是一个标准的 Unix/Linux 命令&#xff0c;但您可能是想提到 jps 的一个变种或误写了 jps 为 jps&#xff0c;而实际上可能是想提及 jps&#xff08;Java Virtual Machine Process Status To…
阅读更多...
linux下常用的终端命令

linux下常用的终端命令

文章目录 1. MV移动文件、重命名文件1.1 移动文件&#xff1a;mv [选项] 源文件或目录 目标文件或目录1.2 文件重命名 2. 查找&#xff1a;文件&#xff0c;内容&#xff0c;统计文件2.1 find查找文件2.2 Linux查找文件内容 3. 查看当前用户4. linux修改文件所属用户和组5. 复制…
阅读更多...
红酒配餐中的酒杯选择与使用技巧

红酒配餐中的酒杯选择与使用技巧

在红酒配餐中&#xff0c;酒杯的选择与使用技巧是影响品鉴体验的重要因素。合适的酒杯不仅能展现出红酒的优雅和风味&#xff0c;还能提升用餐的仪式感和愉悦感。云仓酒庄雷盛红酒以其卓着的品质和丰富的口感&#xff0c;成为了红酒爱好者们的首要选择品牌。下面将介绍在红酒配…
阅读更多...
菜鸟的JavaSE学习之旅7

菜鸟的JavaSE学习之旅7

这是一个目录 数组工具类Arrays数学工具类Math继承重写&#xff08;Override&#xff09;覆盖、覆写注意 构造方法super关键字用法this关键字super和this 抽象抽象方法和抽象类格式抽象方法和抽象类使用抽象方法和抽象类注意事项 数组工具类Arrays java.util.Arrays是一个与数…
阅读更多...
飞书API（10）：通过阿里云MaxCompute数仓入库 - 转为阿里云 DataFrame 再入库

飞书API（10）：通过阿里云MaxCompute数仓入库 - 转为阿里云 DataFrame 再入库

一、引入 上一小节介绍了怎么入库到阿里云的 MaxCompute 数仓&#xff0c;其中涉及到 2 种入库方式&#xff0c;一种是转为阿里云的 DataFrame&#xff0c;然后类似 pandas 的 DataFrame 直接写入 MySQL 的方法&#xff0c;将数据写入表中&#xff1b;另外一种是转为列表&…
阅读更多...
linux开发之设备树四、设备树中断节点

linux开发之设备树四、设备树中断节点

中断节点 这里是由原厂的BSP工程师写的一部分 在CPU的外部有一个GIC控制器&#xff0c;外设会连接在GIC控制器上 设备树是对硬件进行描述的&#xff0c;所以设备树会对CPU进行描述&#xff0c;也要对GIC 控制器进行描述&#xff0c;这部分的代码由原厂的BSP工程师进行编写&…
阅读更多...
微软Build开发者大会速览，OpenAI CEO站台剧透新模型

微软Build开发者大会速览，OpenAI CEO站台剧透新模型

5月22日凌晨&#xff0c;微软Build 2024开发者大会在美国西雅图召开。微软CEO萨蒂亚纳德拉在会上发表主题演讲&#xff0c;宣布了超过50项产品更新&#xff0c;涵盖AI基础设施、模型产品以及生产力工具等多个领域。纳德拉强调&#xff0c;微软一直致力于让人工智能理解人类并帮…
阅读更多...
Python的解析网页

Python的解析网页

课前案例 通过requests模块爬取指定网站中的图片并保存到本地目录中。 上述案例采用的是同步方式下载图片&#xff0c;效率太低。异步方式如下&#xff08;线程&#xff09;&#xff1a; # target为目标函数&#xff1b;args中传入的是download函数的参数url threading.Threa…
阅读更多...
TypeScript系列之-- 数组和元组类型

TypeScript系列之-- 数组和元组类型

数组的定义&#xff1a; 第一种&#xff0c;可以在元素类型后面接上[] let list: number[] [1, 2, 3]; 第二种方式是使用数组泛型&#xff0c;Array<元素类型> let list: Array<number> [1, 2, 3]; 如果数组想每一项放入不同数据怎么办&#xff1f;用元组类型…
阅读更多...
C# yolov8 TensorRT +ByteTrack Demo

C# yolov8 TensorRT +ByteTrack Demo

C# yolov8 TensorRT ByteTrack Demo 目录 效果 说明 项目 代码 Form2.cs YoloV8.cs ByteTracker.cs 下载 参考 效果 说明 环境 NVIDIA GeForce RTX 4060 Laptop GPU cuda12.1cudnn 8.8.1TensorRT-8.6.1.6 版本和我不一致的需要重新编译TensorRtExtern.dll&…
阅读更多...
最新文章

Copyright @ 2022~2023