一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

使用React-JSX编写你的鸿蒙原生应用

背景

鸿蒙提供了基于自研ArtTS的UI开发方式,ArtTS是鸿蒙原生应用后续主推的模式。 我们先通过HelloWorld了解下:

使用React-JSX编写你的鸿蒙原生应用

这是一种基于声明式的UI范式,还是很赞的。且第一开发语言是typescript这对前端同学还是很友好的。
不过,在使用ArkTS开发的过程中,越发觉得其UI语法的限制。 作为React重度使用者,习惯了JSX的灵活自由,使用ArtTS确实会觉得束手束脚。

所以这里提供一种使用JSX开发鸿蒙原生应用的方式,主要借助harmonyos-jsx库,github地址

harmonyos-jsx会实时把你的tsx文件转化为等效的ArkTS,还你JSX的自由和灵活。需要注意的是状态管理仍然需要使用鸿蒙提供的@State等机制。

使用React-JSX编写你的鸿蒙原生应用

先来看下ArkTS在编写UI都有哪些限制。

ArkTS的UI限制

在鸿蒙官方文档中以枚举的形式 ,说明了一下ArkTS的语法规范。

使用React-JSX编写你的鸿蒙原生应用

使用React-JSX编写你的鸿蒙原生应用

其实除了官方提到的这些限制,还有很多我们在开发中会遇到的问题,比如我们不能把一个UI片段赋值给变量,UI片段不能作为函数返回值等等。 假定我们有一个数组反转API, 在React/Flutter 中我们可以直接把UI作为参数传递给函数。

使用React-JSX编写你的鸿蒙原生应用

这里本质的原因在于:ArkTS并不把UI当成是编程中的普通数据来处理,UI需要一些特殊的编译过程。这会限制UI的表达能力。

也正因为如此,ArkTS还定义了条件渲染循环渲染 这种特殊的概念。

使用React-JSX编写你的鸿蒙原生应用

这些概念在JSX里面是不存在的,一切按照你编程的习惯即可,你需要条件渲染自然而然if/三元表达式,你需要循环渲染自然而然数组遍历等等。

使用JSX开发鸿蒙原生应用

上面说了JSX的灵活自由,这里我们来看下如何使用JSX开发鸿蒙原生应用。

  1. 首次使用需全局安装 harmonyos-jsx
npm install -g harmonyos-jsx  
  1. 安装成功之后会提供 hsx命令。 执行–version 判断是否安装成功
hsx --version  
  1. 参考HarmonyOS开发文档 创建初始化项目

  2. 进入项目目录,执行如下脚本hsx, 如果是首次执行此命令将会在ets目录下创建以下文件

    • pages-tsx 目录: 后续的tsx 源码目录
    • arks-global.d.ts
    • tsconfig.json
  3. 使用vscode 或其他你喜欢的IDE,打开项目目录

  4. entry/src/main/ets/pages-tsx目录 创建和编写你的tsx文件即可。 hsx命令会实时把你的tsx文件编译为等效的ArkTS版本, 通过鸿蒙的IDE可实时预览最新UI。

使用React-JSX编写你的鸿蒙原生应用

结论

have fun! github地址。欢迎大家issue mergerequeststar

原文链接:https://juejin.cn/post/7313768894588682266 作者:ykforerlang

(0)
上一篇 2023年12月19日 上午11:02
下一篇 2023年12月19日 上午11:12

相关推荐

发表评论

登录后才能评论