如何编写出优雅的JSX

如何编写出优雅的JSX

前段时间在《深入了解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语义化和可访问性方面感兴趣的话，还可以阅读下面这些文章：

• semantic html
• How to Section Your HTML
• Conversational Semantics
• Semantics in HTML 5
• Importance Of Semantic HTML In Modern Web Development
• Accessibility Through Semantic HTML
• Why, How, and When to Use Semantic HTML and ARIA
• The accessibility stack: making a better layer cake
• Building web accessibility for 2019
• 10 GUIDELINES TO IMPROVE YOUR WEB ACCESSIBILITY
• Accessibility Object Model
• HTML: 为可访问性提供一个良好的基础
• i, b, em, strong元素在HTML5中的新语义
• 无障碍

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

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

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

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

• Achieving Accessibility in React Applications
• Making React Apps More Accessible
• Getting Started with Web Accessibility in React
• 12 Tips for More Accessible React Apps (Slides, React Finland 2019)

在React环境中开发Web应用一般情况之下都是基于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页面是否具有可读性的最佳验证方式之一。

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

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

剩余80%内容付费后可查看 本部分为付费内容，支付后可查看 支付3.99元 已支付，使用阅读码 包月会员登录 购买包月会员推荐 * 请输入阅读码（忘记阅读码？）