JSX(JavaScript XML)是 js 内定义的一套类 XML 语法,可以解析出目标 js 代码,颠覆传统 js 写法。HTML 由浏览器解析,而 JSX 是由 js 解析。当让也可以通过构建工具先解析生成,如 grunt、 webpack ,这样可以减少代码这行中 js 解析 JSX 的时间,这个后面会专题讲诉。JSX 原本是使用官方自己提供的方法处理,但现在React JS 和 React Native 已经全部采用第三方Babel的JSX编译器实现。
JSX并不是由引擎或浏览器来实现,也并不打算并入到ECMAScript标准规范中,它旨在被各种预处理器转换成标准的ECMAScript语法。正如前面所说,JSX就像XML一样,它定义有自己的标签名、属性、子元素,需要注意的是,如果属性的值在大括号内,会当作JavaScript表达式处理,如果在引号内,则会当作字符串类型(String)处理。
它具有以下优点:
1 更加熟悉,语法跟HTML非常相似(90以上相似度)
2 更加语义化,允许自定义标签及组件。
3 更加直观,标签处理方式,更加可读。
4 抽象化,React的升级,不需要改动任何JSX代码。
5 关注点分离,模块化,JSX以干净且简洁的方式保证了组件中的标签与所有业务逻辑的互相分离。