为什么JSX语法这么香？

时间：2023-03-27 18:18:52 JavaScript

前言虽然现在接入JSX语法的框架（React、Vue）越来越多，但毫无疑问，与之关系最深的还是React。在2013年React和JSX出来的时候，社区对JSX的争议很大，而现在，越来越多的人不得不对JSX说“真香”！典型的“真香”系列。什么是JSX？根据React官方的解释，JSX是一种JavaScript语法扩展，类似于模板语法，或者说是一种类似于XML的ECMAScript语法扩展，具有JavaScript的所有功能。这个解释可以从两个关键点提炼出来：“JavaScript语法扩展”和“拥有JavaScript的所有功能”。将支持JSX，因为它原生支持JavaScript。这就引出了一个问题“JSX如何在JavaScript中工作？”JSX语法在JavaScript中是如何工作的？React在React框架中，JSX的语法是如何在JavaScript中生效的？React官网给出的解释是，JSX会被编译成React.createElement()，React.createElement()会返回一个名为“ReactElement”的JS对象。JSX的编译由Babel完成。Babel是一个工具链，主要用于将使用ECMAScript2015+语法编写的代码转换为向后兼容的JavaScript语法，以便它可以在当前和旧版本的浏览器或其他环境中运行。当然，Babel也有将JSX转为JS的能力。看一个例子：左边是我们React开发写的语法，里面有一段JSX代码。经过Babel转换后，都变成了JS代码。事实上，如果你仔细观察，你会发现JSX更像是一种语法糖，通过类似于模板语法的描述来描述函数对象。其实JSX语法在React中并不是必须的，我们也可以使用React.createElement函数，比如使用React.createElement函数来写这么一段代码。classTestextendsReact.Component{render(){returnReact.createElement("div",null,React.createElement("div",null,"Hello,",this.props.test),React.createElement("div",null,"今天是个好日子"));}}ReactDOM.render(React.createElement(Test,{test:"baixiaobai"}),document.getElementById("root"));采用JSX后，代码看起来像这样：day.

);}}ReactDOM.render(,document.getElementById('root'));通过对比发现，在实际功能和效果相同的前提下，JSX代码层次清晰，嵌套关系清晰；而React.createElement的代码给人一种很混乱的“五味杂陈”的感觉。这样的代码不仅读起来不友好，而且写起来也很费力。用JSX语法写的代码更简洁，代码结构层次更清晰。JSX语法糖允许我们开发人员像编写HTML一样编写我们的JS代码。在降低学习成本的同时，也提升了我们的研发效率和研发体验。当然，Vue在Vue框架中无一例外都可以使用JSX语法，虽然Vue默认推荐使用模板。为什么默认推荐模板语法，引用Vue官网的一句话原话如下：任何符合规范的HTML都是合法的Vue模板，这也带来了一些独特的优势：对于很多习惯HTML的开发者来说，模板比JSX更自然的读写。当然这里有主观偏好的因素，但如果这种区别导致开发效率的提高，那么它就具有客观价值。基于HTML的模板可以更轻松地将现有应用程序逐步迁移到Vue。这也使得设计人员和新手开发人员更容易理解和参与项目。您甚至可以使用Pug等其他模板预处理器编写Vue模板。一些开发人员认为模板意味着您需要学习额外的DSL（领域特定语言）才能进行开发——我们认为这种区别是肤浅的。首先，JSX并不是没有学习成本的——它是在JS之上的一组附加语法。同时，就像熟悉JS的人很容易学习JSX一样，熟悉HTML的人学习Vue的模板语法也很容易。最后，DSL的存在让我们可以让开发者用更少的代码做更多的事情，比如v-on的各种修饰符，需要更多的代码才能在JSX中实现相应的功能。从更抽象的角度来看，我们可以将组件分为两类：一类是表现性的，一类是逻辑性的。我们建议前者使用模板，后者使用JSX或渲染函数。这两类组件的比例会根据应用的类型而有所不同，但总体上我们发现表现组件远多于逻辑组件。比如有这样一个模板语法。Helloworld!使用JSX语法可以这样写。render:function(h){return(Helloworld!)}tocreateElement改造后的JS变成了这样。createElement('anchored-heading',{props:{level:1}},[createElement('span','Hello'),'world!']);但是模板语法和JSX语法都不会得到浏览器的天然支持，这些语法会被编译成相应的h函数（createElement函数，不是泛指所有版本，不同版本有区别），最后变成JS对象。这里的编译也和React一样使用Babel插件来完成。不管是React提倡的JSX语法，还是Vue默认的模板语法，目的都是为了让我们写的代码更简洁，代码接口层次更清晰。在降低学习成本的同时，也提升了我们的研发效率和研发体验。读到这里，相信你已经完全理解了“JSX是JavaScript的语法扩展，非常接近模板语言，具备JavaScript的所有功能”。这个定义背后的深层含义。无论是React还是Vue，我们都提到了一个函数createElement，它将我们的JSX映射到DOM。