使用jsx,可以极大的简化react元素的创建,jsx抽象化了react.createelement()函数的使用,其语法风格类似于html语法风格。对比如下代码可以让你更好的理解这一点。
// 使用react.createelement() return react.createelement('p',null,'hello',this.props.name); //使用jsx return
hello {this.props.name}
通过babel,jsx会把转换为使用react.createelement()类的es5的语句,以使得其能被现今的引擎识别。
不过我们应该明白,使用react并非必须使用jsx,jsx只是一种直观的创建react nodes的方法,它是对react.createelement()方法的抽象,通过babel,jsx语句也可以直接在浏览器中运行了。
使用browser.js(babel5.8.23)在浏览器中转换jsx
在运行时引用babel.js虽然容易使用而且还很方便,不过并不是一种好的方案,因为需要转换,所以更加耗时,这一缺点在产品阶段显得更加明显。类似于jsfiddle这样的工具,在线转换react用的就是这种方法。
babel是react团队选择的在使用react过程中转换es*和jsx为es5语句的工具,可以从babel handbook了解babel详细的用法。
实际上,babel的主要用途并非一个jsx语句转换器。babel主要用途是一个javascript转换器,它可以转换各种es*代码为浏览器可识别的es代码。就目前来说,babel主要会转换es6和es7语句为es5语句,转换jsx看起来倒像是其的一个附加功能。
引入的js | 对应的script type |
---|---|
jsxtransformer.js | script type=”text/jsx” |
babel.js | script type=”text/babel” |
browser.js | script type=”text/babel” |
babel的浏览器版本为browser.js(未精简)和browser.min.js(已精简)
如对本文有疑问, 点击进行留言回复!!
荐 超强的入门文章 !!! JavaScript 速成计划第二篇(杂项详解:JS操作HTML 与 CSS、异常、事件)!
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架(上)
【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!
网友评论