this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs

改变this指向的几种方式：

	//1.使用箭头函数代替原始函数写法：getState=()=>{}//2.在函数调用时给函数名加bind(this)方法：(bind中第一个参数表示修改this指向、第二个参数开始是用来传递数据的)onClick={this.getProps.bind(this,this.datas)}//3.在构造函数constructor中通过：this.函数名.bind(this,data)的方式修改this指向//4.调用时使用箭头函数：onClick={()=>{this.getChange(datas)}}

实现数据双向绑定：

React中默认是不能实现数据双向绑定的，也就是说react只支持将数据从state中传递到页面上，页面上的数据不能传递到state中；但是可以通过value事件和onChange事件实现数据双向绑定的效果，如：

	 class Header extends React.Component { constructor(props){super(props)this.state={messages:'hello'}}render() { return (<div><input type="text" value={this.State.messages} readOnly/>{/*注意:当只提供value属性时，会渲染一个只读的控件，此时若修改控件，会报警告；若不想报警告，那么就的加readOnly属性*/}<input type="text" ref='inp' value={this.State.messages} onChange={changeData}/>{/*当value属性和onChange事件同时使用时，可使用逻辑实现数据双向绑定*/}</div>)}// 实现数据双向绑定的逻辑：changeData=()=>{this.setState({// 获取input中文本的方式：// 1.原生DOM的方式：getElementById('input').value// 2.使用refs获取ref设置元素的方式：this.refs.inp.value// 3.使用事件对象的方式：e.target.valuemessages:this.refs.inp.value})}};

父组件向子组件传递数据：

	// 1.传统父组件向子组件传入数据的方式：（一层一层的往下传）// 最外层组件Boxo:export default class Boxo extends React.Component { constructor(props){super(props)this.state={colors:'yellow'}}render() { return (<div><Boxt colorboxt={this.state.colors}/>{/*1.将最外层组件的colors属性值传给中间组件*/}<span>最外层组件</span></div>)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth colorboxth={this.props.colorboxt}/>{/*2.最外层传递数据是用props的方式传递的，所以这里通过this.props的方式获取数据，并以props的方式传递给最里层的组件*/}<span>中间组件</span></div>)}}; // 最里层组件Boxth:  class Boxth extends React.Component { render() { return (<div><span style={{color:this.props.colorboxth}}>最里层组件</span>{/*3.在最里层组件中通过this.props的方式获取数据*/}</div>)}}; // 2.通过context的方式传递数据：（最外层组件声明一次，所有子组件可直接获取）// 最外层组件Boxo:import ReactTypes from 'prop-types';export default class Boxo extends React.Component { constructor(props){super(props)this.state={colors:'yellow'}}getChildContext(){//1.在最外层组件中调用固定方法：getChildContext，此方法返回一个对象，对象中的属性就是要传递的数据return {colorboxo:this.state.colors}}// 2.使用static childContextTypes={}固定写法规定colorboxo数据的类型，记得引入prop-type包static childContextTypes = {colorboxo:ReactTypes.string}render() { return (<div><Boxt /><span>最外层组件</span></div>)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth /><span>中间组件</span></div>)}}; // 最里层组件Boxth:  class Boxth extends React.Component { static childContextTypes = {//3.在子组件中继续做数据类型校验，校验完就可以直接使用了colorboxo:ReactTypes.string}render() { return (<div><span style={{color:this.context.colorboxo}}>最里层组件</span>{/*4.通过this.context.属性名获取数据*/}</div>)}}; //3.新版React中Context的使用步骤：var Colors = React.createContext('blue');//1.使用React的createContext方法创建一个可被深入传递的对象，括号中为默认值// 最外面的子组件：export default class Boxo extends React.Component { render() { return (<Colors.Provider value='yellow'>{/*2.Colors对象使用Provider将当前的值传递给一下的组价，下面任何组件都能拿到该值；在这里将yellow做为新值传递下去*/}<Boxt/><span>最外面的组件</span></Colors.Provider>)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth /><span>中间组件</span></div>)}}; // 最里层组件Boxth:  class Boxth extends React.Component { static contextType = Colors;//3.在子组件中使用 static contextType接收对象render() { return (<div><span style={{color:this.context}}>最里层组件</span>{/*4.通过this.context拿到从里向外最近的Provider的值，这里值为yellow*/}</div>)}};

JSX中的循环:

JSX中是不能写循环的，但是可以将循环的元素存到数组中，在JSX中数组是直接被展开的,如：

	// 遍历的方式输出10个li元素:var lis = [];for(var i = 0;i < 10; i++){var lie = <p key={i}>hello</p>;{/* 旧版JSX中当遍历的元素相同时会有报错，此时应该给循环元素中加key={i}确保每项不同，新版中不会报错 */}lis.push(lie);}const elements =<div><ul>{lis}</ul></div>const box = document.getElementById('box');ReactDOM.render(elements,box);//当然上面只是一种方式，常用的方式如下：class Header extends React.Component { constructor(){this.state.datas=[{id:'1',names:'jack'},{id:'2',names:'honest'},{id:'3',names:'luck'}]}render() {return (<div>{/*利用map拿到数据，通过：{数据} 的方式渲染*/}{this.state.datas.map(item=>{return<span>{item.names}</span>})}</div>)}}; ReactDOM.render(<Header names='jack'/>, document.getElementById('box'));

React中样式：

在React中使用样式修饰元素，有两种方式，如：

	//1.外链式（推荐,但是需要优化，看注意）：import './css/main.css';//导入普通css样式文件<span className='colors'>hello</span>//使用className定义类名使用外链式中的类样式//2.行内式：<span style={{color:'yellow',fontSize:'18px'}}>hello</span>//行内式中style=接一对{}表示js语法，里面的{}表示属性对象，这个对象可以提到外部，且属性采用驼峰命名法，属性值要使用引号包裹（属性值单位为px时，可以省略单位和引号）//注意：因为上面外链式样式是全局的样式之间会冲突，但是React中没有像vue中scoped一样的指令，当然也是有办法的(css模块化，使类样式私有)：//1.使用模块化导入css样式文件:import mainStyle from './css/main.css' ;不能直接import './css/main.css'的方式导入//2.修改webpack.config.js文件中处理css文件的css-loader为：'css-loader?modules&localIdentName=[name]_[local]-[hash:6]' 即,加参数//3.通过：mainStyle.类名 拿到具体的类样式，如：<span classNmae={mainStyle.colors}>hello</span>//4.有时候可能会将私有的类暴露为全局的类，此时只需要在css文件中将某类名通过：:global{.类名}包裹，如：:global{.box}{width:100px;height:200px;border:1px solid;}//若同时想要私有和公有，那么就的使用两个类样式（公有和私有）

路由：

React在5.2.0版本中提供了两套路由模块，WEB版和 NATIVE版。做网站选择web版(npm install react-router-dom)，做移动App选择native版(npm install react-router-native)；这里选择web形式进行介绍：

	 // 1.终端键入：npm install react-router-dom --save 安装路由// 2.按需导入模块：HashRouter(路由容器，包裹所有路由相关的东西，只需用一次)、Route(路由规则)、Link(路由链接)import {HashRouter,Route,Link} from 'react-router-dom';import Homeone from './components/homeone.js'import Hometwo from './components/hometwo.js'import Homethree from './components/homethree.js'export default class App extends React.Component{constructor(props){super(props)this.state={}}render(){//1.hashRouter容器里面只能有一个根节点，此容器包裹路由return <HashRouter><div><div>{/*2.Link类似vue中router-link*/}<Link to='/homeone'>页面一</Link><Link to='/hometwo'>页面二</Link><Link to='/homethree/fun/53'>页面三</Link>{/* 这里传递的fun和53可以在组件中通过：this.props.match.params.type(or id)拿到 */}</div><div>{/*3.Route用来处理路由的规则并做元素占位（vue中router-view）,因此Route可放在不同的结构中；path匹配路由，component匹配渲染的组件*/}<Route path='/homeone' component={Homeone}></Route><Route path='/hometwo' component={Hometwo}></Route><Route path='/homethree/:type/:id' component={Homethree} exact></Route>{/*react中路由默认是不严格配置，也就是说只要Link中路由字符中包含path中字符则可匹配；若要开启严格匹配模式：在Route中加exact即可*/}{/* 如果想要严格匹配且参数变化时，可以通过 /:type/:id 传递参数的形式匹配Link*/}</div></div></HashRouter>}}

JSX独立文件：

react中jsx文件可以独立存在，使用时在html文件引入即可，如：

	//1.以下是JSX文件代码(实际就是js文件,这里命名为：testjsx.js)，如const box = document.getElementById('box')var content=(<div>{/*JSX中可以使用js表达式,如运算，三元表达式，变量等*/}<h1>{1+1}</h1>{/*允许数组出现在JSX中，此时数组会自动展开所有项，如：*/}<div>{[1,'2','hello']}</div></div>{/*建议将内容用小括号包裹起来，这样即使换行之类也不会影响*/});ReactDOM.render(content,box);//2.在html文件中引入以上文件：<body><div id="box"></div><script type="text/babel" src="testjsx.js"></script></body>

其他方式使用React依赖资源：

除导入模块的方式引用资源外，还有一些方式引入资源，如：

引用CDN资源启动React：

	<!DOCTYPE html><html><head><meta charset="UTF-8" /><title></title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><!--React核心库--><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><!--提供与DOM相关功能的库--><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><!--用来编译JSX代码将ES6转化为ES5，生产环境不建议使用--></head><body><div id="box"></div><script type="text/babel">//这里type="text/babel"表示使用为JSXvar box = document.getElementById('box'); ReactDOM.render(<p>Hello</p>, box);//ReactDOM.render(content.element)方法将content内容渲染到element元素上，即：ReactDOM可以将浏览器DOM和React元素保持一致。</script></body></html>

安装React相关资源引入启动React：

	1.新建一个文件夹，这里命名为reacttest,并在此文件夹下进入命令行2.命令键入：npm i babel-standalone react react-dom --save 安装：babel-standalone、react、react-dom3.在reacttest文件夹中新建test.html文件，代码入下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="node_modules/babel-standalone/babel.min.js"></script><script src="node_modules/react/umd/react.development.js"></script><script src="node_modules/react-dom/umd/react-dom.development.js"></script></head><body><div id="box"></div><script type="text/babel">const box = document.getElementById('box');ReactDOM.render(<p>Hello</p>,box)</script></body></html>4.在浏览器打开test.html文件如果看到hello,则表示成功。

通过create-react-app启动React：

create-react-app类似于vue中vue-cli,是快速搭建React项目环境的脚手架工具，具体使用如下：

	1.新建一个文件夹，这里命名为：createreactapp（随便找个文件打开终端即可，这里并非项目文件夹），并进入终端2.终端输入：cnpm install create-react-app -g 全局安装：create-react-app脚手架工具3.终端继续输入：npx create-react-app test 创建一个名为test的react项目文件夹；npx不是拼写错误，它是npm5.2+附带的package运行工具4.终端继续输入：cd test 切换到test目录下5.终端继续输入: npm start 启动项目，此时在浏览器输入:http://localhost:3000此时就会看到react页面7.在src目录下App.js中，reader()括号中的内容将被显示在浏览器中，实际开发中可以修改reader括号中的内容来达到项目的要求。8.打生产环境的包,终端输入：npm run build ,同时build后的项目需要在服务器下才能访问；否则打开的将是空白页面；执行该命令前需要在 package.json 中新增条配置"homepage": "."9.将打包好的build文件夹中的内容全部复制部署到服务器上，（测试可以使用Apache本地服务器打开），通过访问服务器地址即可看到react项目。

更新元素渲染：

React 元素都是不可变的，想要改变DOM就要创建新的元素并通过ReactDOM.render()重新渲染；值得注意的是 ReactDOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变的部分。

事件处理：

React 元素的事件处理和 DOM 元素类似，区别：react中事件采用驼峰命名法、不能使用return false阻止默认行为，必须通过事件对象：e.preventDefault()阻止默认行为，如：

	<button onClick={actions}>function actions(e){e.preventDefault();console.log('hello');}

获取数据：

在React中可以使用es6中fetch来获取数据，它是基于Promise封装的，但是它不能跨域请求，具体用法如：

	fetch(url)//fetch可异步请求数据，括号里面传入接口地址；后面then表示请求成功，里面接收一个回调函数得到response对象，这里不能拿到数据.then(response=>{// console.log(response);return response.json()//response.json()可以拿到数据，这里return出去通过第二个then()拿到处理}).then(datas=>{console.log(datas);})

通过fetch-jsonp跨域请求数据：

fetch-json是一个第三方包，用来做跨域请求数据，具体用法如下：

	//1.终端键入：npm install fetch-jsonp --save 下载fetch-jsonp//2.导入fetch-jsonp包：import fetchJSONP from 'fetch-jsonp'//3.使用fetch-jsonp获取数据：（用法和fetch一样）fetchJSONP(url).then(response=>{return response.json()}).then(datas=>{console.log(datas);})

文档推荐：

上面只是简单介绍React，想要了解更多，可阅读相关中文文档：https://react.docschina.org/docs/forms.html

Ant Design:

在React UI开发中，推荐使用Ant Design,使用时阅读官方文档即可。

一款UI设计语言，多为react服务，了解更多请阅读相关文档：https://ant.design/index-cn

electronjs:

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序（电脑端）框架。了解更多阅读官方文档：https://www.electronjs.org/

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的？...

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的？...

上一期小明分享了企业职工养老保险退休待遇怎么算&#xff0c;具体可戳小明说养老|养老金怎么算&#xff1f;小明来教你。在以张阿姨为例的计算举例中&#xff0c;提到张阿姨15年的平均缴费指数为0.8209。对这个平均缴费指数的概念提问较多&#xff0c;今天就来解释一下月平均缴…
阅读更多...
高性能IO设计的Reactor和Proactor模式（转）

高性能IO设计的Reactor和Proactor模式（转）

在高性能的I/O设计中&#xff0c;有两个比较著名的模式Reactor和Proactor模式&#xff0c;其中Reactor模式用于同步I/O&#xff0c;而Proactor运用于异步I/O操作。 在比较这两个模式之前&#xff0c;我们首先的搞明白几个概念&#xff0c;什么是阻塞和非阻塞&#xff0c;什么是…
阅读更多...
ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介&#xff1a; ReactNative是基于React语法来进行开发移动app的框架&#xff1b; ReactNative中提供了移动端专用的一些组件&#xff0c;我们要使用ReactNative固有的组件代替网页中使用的一些元素&#xff0c;如&#xff1a;div, p, img 都不能用了&#xff1…
阅读更多...
odis工程师使用方法_傅里叶红外光谱仪常见故障维修及排除方法，你了解有多少种呢？...

odis工程师使用方法_傅里叶红外光谱仪常见故障维修及排除方法，你了解有多少种呢？...

傅里叶红外光谱仪在使用过程中难免会出现故障&#xff0c;那我们该怎么检修呢&#xff1f;赛默飞傅里叶红外光谱仪有些光谱仪器的使用说明书会给出光谱仪的常见故障及排查方法&#xff0c;有些光谱仪器还有自诊断功能&#xff0c;当傅里叶红外光谱仪不能正常工作时&#xff0c;…
阅读更多...
HDU-1102-Constructing Roads（并查集）

HDU-1102-Constructing Roads（并查集）

题目链接 http://acm.hdu.edu.cn/showproblem.php?pid1102 这题大意就不讲了&#xff0c; 这题很容易&#xff0c;不过我做的很不爽&#xff0c;一个下午&#xff0c;一直WA&#xff0c;后来才发现数组开小了 只开了s[6000],本来100*10010000&#xff0c;要开至少10000的搞糊了…
阅读更多...
python统计程序运行时间-如何方便地统计 Python 程序每一个函数、每一行代码执行所花的时间？...

python统计程序运行时间-如何方便地统计 Python 程序每一个函数、每一行代码执行所花的时间？...

当然是用 line_profiler 堪称神器 贴个官方例子片段 这个功能应该是你想要的吧: Line # Hits Time Per Hit % Time Line Contents149 profile 150 def Proc2(IntParIO): 151 50000 82003 1.6 13.5 IntLoc IntParIO 10 152 50000 63162 1.3 10.4 while 1: 153 50000 69065 1.4…
阅读更多...
微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件

微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件

微信小程序介绍&#xff1a; 小程序简介&#xff1a; 小程序是一种连接用户与服务的方式&#xff0c;它能在微信内被便捷地获取和传播&#xff0c;具有出色的使用体验。 不需要下载安装&#xff0c;用户通过搜一搜或扫一扫就可以打开使用&#xff0c;使用完后退出即可。 小…
阅读更多...
微信小程序中app.js文件、组件、api

微信小程序中app.js文件、组件、api

app.js文件&#xff1a; 每个小程序都需要在app.js中调用 App 方法注册小程序实例. App({//App实例化&#xff0c;整个小程序只有一个App实例&#xff0c;全部页面共享onLaunch: function () {//onLaunch小程序启动之后触发 },onShow: function () {//onShow小程序启动&#…
阅读更多...
tia v15 添加项目_硬技能，TIA 博途软件界面的介绍

tia v15 添加项目_硬技能，TIA 博途软件界面的介绍

在前面的文章中给大家介绍了TIA 博途软件的安装包等介绍&#xff0c;这次小编给大家介绍一下TIA 博途软件的界面。#电工学习PLC#你知道吗&#xff0c;在博途软件的自动化项目任务的创建中&#xff0c;我们可以使用portal视图和项目视图。Portal视图是面向任务的视图&#xff0c…
阅读更多...
UIImagePickerController按钮的中文问题

UIImagePickerController按钮的中文问题

UIImagePickerController按钮的中文问题 执行以下两步即可 1. 在targets中设置region为China 2. 在project中添加支持中文 转载于:https://www.cnblogs.com/YouXianMing/p/3935460.html
阅读更多...
Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件

Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件

Gulp介绍&#xff1a; gulp概念&#xff1a; 基于node开发的前端构建工具模块&#xff0c;将前端机械化的操作编写成任务自动化操作&#xff0c;类似于webpack构建&#xff0c;可以完成代码压缩、语法转换、抽离公共文件、自动实现浏览器刷新等。 基本使用步骤&#xff1a; …
阅读更多...
rsatool使用步骤图解_工作中想要事半功倍？图解来助你

rsatool使用步骤图解_工作中想要事半功倍？图解来助你

一次会议上&#xff0c;老板让我们进行一场头脑风暴&#xff0c;然后将脑中浮现出来的想法以ppt的形式&#xff0c;在会议上与大家分享。在会上我看到其他区域的同事做的ppt&#xff0c;真的叫一个精美啊&#xff0c;有图形对比、有案例分析、有未来展望。反观自己的&#xff0…
阅读更多...
ZRender源码分析2：Storage(Model层)

ZRender源码分析2：Storage(Model层)

回顾 上一篇请移步&#xff1a;zrender源码分析1&#xff1a;总体结构 本篇进行ZRender的MVC结构中的M进行分析 总体理解 上篇说到&#xff0c;Storage负责MVC层中的Model&#xff0c;也就是模型&#xff0c;对于zrender来说&#xff0c;这个model就是shape对象&#xff0c;在…
阅读更多...
java语言概述、java语言特性、java语言发展史、java语言作用

java语言概述、java语言特性、java语言发展史、java语言作用

Java介绍&#xff1a; Java语言概述&#xff1a; Java语言是由美国Sun&#xff08;Stanford University Network&#xff09;斯坦福网络公司的java语言之父–詹姆斯高斯林&#xff0c;在1995年推出的高级的编程语言。所谓编程语言&#xff0c;是计算机的语言&#xff0c;人们…
阅读更多...
电脑显示器不亮主机正常_电脑主机已开机 显示屏却不亮（看完秒懂）

电脑显示器不亮主机正常_电脑主机已开机 显示屏却不亮（看完秒懂）

台式电脑是工作的得力助手&#xff0c;我们用的是软件&#xff0c;但是如果硬件出问题了&#xff0c;就无法工作了。有时会遇到台式电脑开机&#xff0c;主机开了&#xff0c;但是屏幕却不亮&#xff0c;是怎么回事呢&#xff1f;现在&#xff0c;笔者告诉大家怎样一步步查明原…
阅读更多...
转：HTML错误编号大全

转：HTML错误编号大全

HTML错误编号大全 状态行包含HTTP版本、状态代码、与状态代码对应的简短说明信息。在大多数情况下&#xff0c;除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的&#xff0c;它描述的是后面文档的MIME类型。虽然大多数应答都包含一个文档&#xff0c;但也有…
阅读更多...
二进制的认识、进制之间的转换、计算机储存单位

二进制的认识、进制之间的转换、计算机储存单位

二进制&#xff1a; 计算机中的数据不同于人们生活中的数据&#xff0c;人们生活采用十进制数&#xff0c;而计算机中全部采用二进制数表示&#xff0c;它只包含0、1两个数&#xff0c;逢二进一&#xff0c;如&#xff1a;1110。每一个0或者每一个1&#xff0c;叫做一个bit&am…
阅读更多...
.net一个函数要用另一个函数的值_VLOOKUP函数

.net一个函数要用另一个函数的值_VLOOKUP函数

两个表格顺序不同&#xff0c;如何匹配合并&#xff1f;如下图&#xff1a;常常遇到有人问我&#xff0c;两个表格需要按照人名合并起来&#xff0c;但是两表的人名顺序并不相同&#xff0c;怎么处理呢&#xff1f;这个就要用到EXCEL大名鼎鼎的VLOOKUP函数了。具体语法如下&…
阅读更多...
Spring中bean的五个作用域简介(转载)

Spring中bean的五个作用域简介(转载)

Spring上个版本的IoC容器支持两个不同的bean作用域&#xff08;单例与原型&#xff09;。Spring 2.0改进了这一点&#xff0c;不仅提供了一些依赖于Spring部署环境&#xff08;比如说&#xff0c;在web环境中的request和session作用域bean&#xff09;的额外的作用域,而且提供了…
阅读更多...
外部函数获取内部函数变量_一维随机变量的分布函数

外部函数获取内部函数变量_一维随机变量的分布函数

一、分布函数、概率密度(一)一维随机变量的分布函数(二)一维离散型随机变量的概率分布(三)一维连续型随机变量的概率密度(四)一维连续型随机变量的函数的概率密度如&#xff1a;设X的概率密度为f(x), g(x)为连续函数&#xff0c;求Yg(x)的概率密度。方法一、定义法step 1. 求出…
阅读更多...
最新文章

Copyright @ 2022~2023