react本质：JSX如何转化为javascript

时间 2019-11-08

标签 react 本质 jsx 如何转化 javascript 栏目 React 繁體版

原文原文链接

react中基本都使用JSX来开发，但JSX实际上是javascript的一种语法糖。javascript

什么是语法糖？

语法糖就是提供了一种全新的方式书写代码，可是其实现原理与以前的写法相同。
语法糖能够说是普遍存在于各类计算机代码中，包括C语言中的a[i]其实就是*a+i的语法糖。而今天对于咱们来讲，a[i]其实已经很广泛和经常使用了，因此也没有人提这是语法糖这回事了。由于终极来讲，全部语言都是汇编语言的语法糖：）java

简单说，JSX是一种更简便书写javascript的方式
因为DOM结构被咱们写到了javascript文件里，由javascript来生成DOM结构
若是一直使用javascript来写DOM结构，那么render函数里就是一堆React.createElement
这样既不美观也不实用。react

可是咱们必须知道，JSX本质上就是javascript
在编译的时候，会由babel将JSX转化为javascript。babel

好比函数

<div className="aaa">
    <span>222</span>
      <span>333</span>
</div>

生成了spa

"use strict";

React.createElement("div", {
  className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

好比code

function Comp(){
    return <div className='test'>test</div>
}

<Comp className="test2">222</Comp>

生成ip

"use strict";

function Comp() {
  return React.createElement("div", {
    className: "test"
  }, "test");
}

React.createElement(Comp, {
  className: "test2"
}, "222");

了解JSX的本质，只须要记住：JSX本质就是javascript开发

附录

babel提供的一个在线转换JSX为javascript的地址
https://babeljs.io/repl/get