如何编写出优雅的JSX

作者：大漠 日期：2019-08-31 点击：438
React
JSX
会员专栏

特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

前段时间在《深入了解JSX》一文中整理了JSX相关的知识和细节。作为一名Web开发者，不管写纯HTML模板代码还是现在在JSX中写JavaScript和HTML混合的代码，我们都应该有追求，那就是怎么写出更优雅、更具可读性和更易于维护的代码。那么在这篇文章中我们就来一起聊聊如何写出更优雅的JSX代码。

HTML语义化和可访问性

HTML语义化有一个专有术语 Semantic HTML（也有人常称其为Semantic Markup）。其主要目的是使用HTML标记来增强Web页面和Web应用程序中信息的语义或含义，而不仅仅是定义其表示形式或外观。

在不同的时间，Web开发者都对语义化有着极大的诉求，也在致力于写出更具语义化的模板。但也有一些开发者在这方面欠缺一定的能力。比如下图所示，是最为明显的对比（无语义化 vs. 有语义化）：

刚才也提到过了，在不同的时期，在构建语义化模板时也有所差异，比如HTML4和HTML5：

特别是在HTML5的时代，面对这么多语义化的标签，我们应该如何选择呢？在HTML5 Doctor上提供了一张图，有助于我们如何选择具有语义化的标签：

语义化HTML除了让你的代码变得更为优雅之外，还令你的代码更具可读性，除此之外还能有利于搜索引擎的识别，有利于Web页面的SEO。

另外，语义化HTML和可访问的富交互互联网应用程序（ARIA）的结合为你的内容添加了基本的含义，从而使Web浏览器、搜索引擎、屏幕阅读器、RSS阅读器和最终用户都能够理解。而且可访问性是Web开发过程中首要的思想和基础。除了兼容不同的终端，开发人员有义务让你的用户能通过别的方式（比如键盘，屏幕阅读器等）访问你的网站。随着HTML、CSS和JavaScript的学习，可访问性是一个重要的术语，它并不仅适用于社会的特定人群，而是适用于我们所有人。

如果你对HTML语义化和可访问性方面感兴趣的话，还可以阅读下面这些文章：

React中也会有语义化和可访问性的需求

时至今日，开发Web页面或Web应用不再局限于HTML、JavaScript和CSS了。比如说基于Vue或React框架体系上来开发Web页面或Web应用程序。但这只是改变了开发方式，但有一些基本的诉求或者说基本要求是不会变的。就拿React环境下来说吧。React官方都有专门的内容介绍如何在React环境上开发更具可访问性的应用。

除了React官方有这方面的介绍，就在社区也有这方面的诉求。比如@stephaniecodes绘制的手绘图就足以说明：

偶尔发现，在Twitter的 #sketchnote话题下面有很多优秀的手绘稿，感兴趣的可以看看。

相关方面的话题还可以阅读：

在React环境中开发Web应用一般情况之下都是基于JSX来编写模板。接下来回到我们今天的主话题中来：如何编写优雅的JSX？针对这个主题我们分为两个部分来阐述。

语义化JSX

JSX语法提供一个抽象层，这对基于组件系统非常有用。

使用JSX来封装UI片段可以更容易地组合更大的系统，但它也隐藏了应用程序的“骨架”结构。而JSX简单的理解呢就是带有一定逻辑的HTML（在HTML上新增了JavaScript）。前面我们也提到过，在编写HTML的时候都提倡要尽可能的编写带有语义化的HTML和具有可访问性的HTML。那么在React框架体系下，使用JSX进行模板开发时，我们也应该尽可能的编写具有语义化和可访问性的JSX代码。

编写具有语义化和可访问性的JSX和编写具有语义化和可访问性的HTML基本上无较大的差异。比如我们在使用哪个元素时，其重要的原则是：不应该仅依赖于视觉外观。因为任何东西都可以有不同的视觉外观。也就是说，如果我们根据行为和意义来选择元素，那么会更贴合于我们实际。换句话说，根据行为和意义来选择元素，可以编写出更具语义化的模板，不管是JSX还是HTML。

稍微有点历史的Web开发者都应该记得每年的4月9日是CSS的裸奔节（CSS naked day），简单地说，就是让你的网站完全脱去CSS的外衣，将身体彻底的裸露给你的用户：

这也是验证你的Web页面是否具有可读性的最佳验证方式之一。

This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning. The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>.

当然，如果你想以最快的方式验证你的网站是否具有较好的可读性，可以尝试通地devtools，禁用页面中所有的CSS。

这可能对于如何编写出具有语义化的JSX看上去没有太多的关系。不过为了能更好的阐述如何编写出一个具有语义化的JSX，我们先来看一个小示例。使用Google搜索猫的图

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/react/how-to-write-elegance-jsx-code.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部