【ReactJS】困惑于text/babel与browser.js还是babel.js？

青旅半醒 2022-06-02 03:00 126阅读 0赞

### 使用JSX ###

使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风格类似于HTML语法风格。对比如下代码可以让你更好的理解这一点。

// 使用React.createElement()
    return React.createElement('div',null,'Hello',this.props.name);
    
    //使用JSX
    return <div>Hello {
       this.props.name}</div>

通过Babel，JSX会把转换为使用React.createElement()类的ES5的语句，以使得其能被现今的浏览器引擎识别。

不过我们应该明白，使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行了。

### 转换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看起来倒像是其的一个附加功能。**

<table> 
 <thead> 
  <tr> 
   <th>引入的JS</th> 
   <th>对应的script type</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>jsxTransformer.js</td> 
   <td>script type=”text/jsx”</td> 
  </tr> 
  <tr> 
   <td>babel.js</td> 
   <td>script type=”text/babel”</td> 
  </tr> 
  <tr> 
   <td>browser.js</td> 
   <td>script type=”text/babel”</td> 
  </tr> 
 </tbody> 
</table>

### babel.js与browser.js的关系 ###

babel的**浏览器版本**为`browser.js`（未精简）和`browser.min.js`（已精简）

[Babel handbook]: https://link.jianshu.com/?t=https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/user-handbook.md