react本质JSX如何转化为javascript

40次阅读

共计 914 个字符,预计需要花费 3 分钟才能阅读完成。

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

什么是语法糖?

语法糖就是提供了一种全新的方式书写代码,但是其实现原理与之前的写法相同。
语法糖可以说是广泛存在于各种计算机代码中,包括 C 语言中的 a[i]其实就是 *a+ i 的语法糖。而今天对于我们来说,a[i]其实已经很普遍和常用了,所以也没有人提这是语法糖这回事了。因为终极来说,所有语言都是汇编语言的语法糖:)

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

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

比如

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

生成了

"use strict";

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

比如

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

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

生成

"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/

正文完
 0