React 比 鸿蒙运行开发 体验更好

一、pre

在阅读这篇文章之前，必定要同步一个观念就是： 注重语义化 是一个顶尖程序员的必备素养，因此很多时刻你会听到他人吐槽命名太难，其实是由于他的习气十分好，更宿愿找到齐全符合场景的命名，这自身就是一件费脑子的事情。假设这个观念咱们不可达成分歧，那么本文的一切说法或许对你来说就显得比拟可笑。

二、痛点

例如这样一段代码，咱们能够很明晰的知道 DOM 结构是怎样样的，然而其详细的规划结构方式和个性就不知道了。

虽然 HTML 也新增了许多语义化标签来补偿这种语义体现力缺失的疑问，然而由于大家的运行场景是在是很难和这些语义化标签十分符合的对应上，从而造成了语义化标签的经常使用并不是很宽泛，到目前为止，语义化标签都处于一个很难堪的境地。

造成语义化标签被广阔开发者淡薄的很大一局部要素，是由于 HTML 设计的这几个语义化标签确实是不太婚配日常开发的大少数详细场景。

好在咱们在经常使用 React/Vue/Angular 开发名目时，可以经过自定义组件来增强某一个局部的语义表白。

例如在 React 中，咱们编写一个分页列表，你一眼就能看进去我的页面结构长什么样。

这曾经是 UI 表述的最佳通常。然而咱们也不是只看最外面这一层，当你深化到更底层的逻辑时，最后看到的还是 div，语义体现力无余的理想总是存在的。

因此为了处置这个疑问，在 antd 等低劣的开源框架中，为了增强组件的语义体现力，会提供RowCloumnFlexGrid等容器组件供开发者经常使用。

这其实是 UI 表白的最佳通常。然而 antd 等框架关于这种思绪的践行并不是十分彻底。他没有十分明白的倡议说，咱们不要经常使用 div 了，所以许多开发者就算经常使用了这种方式，也不是把它当成最佳通常来经常使用，很多时刻只是为了少些两行 css 代码才经常使用他们。

很多时刻也源自于 UI 组件库自身也没有想要去做一个大而全的规划思想重构，从而造成 antd 虽然提出了这个方向和构思，然而个别开发者也不必定能体会到。

HTML + CSS 语义体现力缺失还体如今结构和样式分别。有很大一局部开发者并不青睐写完毕构之后，还要从新去另外的文件给他补充样式。并且这样方式在保养的时刻也并不友好，隐性的规定让样式的最终结果变得虚无缥缈。

所以很多后端来写前端，或许他什么都能搞定，就是搞不定 css 样式，这可太难了，哈哈哈哈。

许多开发者都看法到了这种痛点。因此css in js的打算层出不穷。原子 css 又再次从新火了起来。不过在根源上由于 HTML 文档流的设计不够繁复，视觉格局化模型中触及到的概念太多，因此最终在经常使用上依然会有不小的了解老本与费事。

例如大家在经常使用原子化 css 的时刻，很容易会产生一个元素上套用了太多 class 的状况，反而造成可读性极大的降落。

因此咱们要求思索新的打算来处置这种场景，例如经常使用一个变量名来复用这些样式。

const btn = 'blue- hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm text-white font-mono font-light py-2 px-4 border-2 rounded border-blue-200'<button class={'btn'}>Button</button>

这些理念都十分好。然而原子化 CSS 毕竟不是间接编写样式，他的实用场景会遭到很大的限度。

并且当咱们在思索如何复用原子化 CSS 的时刻，其实就示意，开发者确真实等候一套完整的，全新的 UI 规划表述方式。

这就是鸿蒙运行开发中，ArkUI的规划思绪。

在设计上，arkUI 充沛排汇了 HTML 等客户端打算开展这么多年的阅历经验，在设计上齐全摒弃了文档流的概念，转而强调容器的概念。为了应答不同的场景，arkUI 目前曾经允许了 26 种容器组件。由于其明白的语义化，学习老本也十分低，例如如下容器组件，咱们一看就能知道这是用来干嘛的。

RowColumnFlexGridListScrollSwiperTabsRefresh...

并且规划方式究竟是什么状况，由容器组件说了算，而不是子元素的类型说了算。

// 示意从左到右规划Row() {Text('hello world')Text('hello world')Text('hello world')}

// 示意从上到下规划Column() {Text('hello world')Text('hello world')Text('hello world')}

除了在语义化上十分注重之外，arkUI 并不允许结构与样式分别，而是把设置样式的行为当成一个方法，允许一种链式调用的方式来做到样式与结构兼并的最终结果。

Text('width: 10px').fontSize('12fp').color('#333').border({width: '10px',color: Color.Red,style: BorderStyle.Dotted,radius: 15})

这其实是原子化 css 的退化版。假设你觉得原子化 CSS 真香，那么这种方式的好处你也必定能够极速了解到。

而且他比原子化 CSS 学习和记忆老本更低，更灵敏，可以说是原子化 CSS 的理想化成功。

ArkUI 在设计上，还引入了一个危险较大的设定：样式后置。

Column() {Text('hello text').fontSize('12fp').fontColor(Color.Black).fontStyle(FontStyle.Italic)}.width(20).height(20).border({width: 10,color: Color.Blue})

之所以说他风大，是由于这种书写方式大家都没见过，或许会容易给人的第一觉得就是：什么玩意儿 ...

哪怕是在 Flutter 的设计中，也是可前置可后置，而后不论是文档案例，还是大家在开发中，其实也是让样式前置。

// 伪代码Widget build(BuildContext context) {return new Container(width: 20,height: 20,...child: new Text())}

我刚开局在学习 Swift 经常使用的时刻也会担忧这种样式后置的方式会让样式堆在一同比拟舒服，然而用了一段期间之后发现，真香！

咱们来看一下这样一段代码。

Column() {Text(`最新值：${this.counter}`)Column().block()Column().block()Column().block().onClick(() => {this.counter ++})}.margin(10).border({width: 4}).width('50%').height('lpx').justifyContent(FlexAlign.SpaceEvenly)

.block是样式的复用。

@Extend(Column) function block() {.width(40).height(40).backgroundColor(Color.Orange).border({width: 2,color: Color.Red})}

之所以我觉得真香的要素是由于咱们在开发环节中，其实子元素的样式重复十分多，因此咱们会思索将子元素的样式封装起来，用一些方式来复用它。

这样，当咱们将样式后置之后，虽然咱们依然对父元素增加了一串样式，然而前面一局部的代码结构就依然十分繁复。

以前在刚开局接触学习 Flutter 的时刻，也觉得 Flutter 的 UI 体现方式太蹩脚太复杂了，为什么不学着 JSX 那样搞繁难一点，并且其他人的这个相似想法还在 github 上有十分强烈的讨论。

直到起初我才了解到，这种注重语义化和容器的 UI 表白方式，或许比 JSX 更好，这才是最佳通常。

三、总结

鸿蒙运行开发的 ArkUI，和基于 HTML + CSS 的 React 相比，能够更繁难的经常使用语义化，倡议样式与结构兼并，并在 UI 设计上，简化了视觉格局化模型，注重容器个性，学习了解老本获取了极大的降落，并且基于set的思想方式链式调用样式，大胆的将样式后置，在我团体的客观感触里，这是一种比 React，比 Flutter 更温馨的开发体验。

大少数前端开发多半都有一个坏习气，写点代码就想看看规划如今曾经长什么样了，这样其实挺影响开发效率的。你或许要求频繁的切换或许必定要一个外接显示器随时预览，反正我就是这样。也不知道大家有没有... 想想这是什么要素形成的吧。