react为什么要使用jsx

一句话解释

JSX是一个JavaScript的语法扩展或者说是一个类似于XML的ECMAScript语法扩展，其实react本身并不强制使用jsx

JSX 原理分析

要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

1
2
3
4
5
6
7

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
	render(){
		return (
			<div className='app' id='appRoot'>
        	<h1 className='title'>欢迎进入React的世界</h1>
        	<p>React.js 是一个构建页面 UI 的库</p>
      	</div>
		)
		
	}
}
ReactDOM.render(
	<App />,
	document.getElementById('root')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

编译之后将得到这样的代码:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
	React.createElement(App),
  document.getElementById('root')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

React.createElement会构建一个 JavaScript 对象来描述你HTML结构的信息，包括标签名、属性、还有子元素等

// 语法：
React.createElement(
	type,
	[props],
	[...children]
)

1
2
3
4
5
6
7

所谓的JSX其实就是JavaScript 对象，所以使用React 和JSX的时候一定要经过编译的过程：

JSX → 使用 React 构造组件，bable 进行编译 → JavaScript 对象 → ReactDOM.render() →DOM元素→插入页面

优点是什么

1.快速，JSX执行更快，因为它在编译为JavaScript代码后进行了优化。

2.使用 JS，通过React.createElement来创建VDOM，当存在标签嵌套时，代码杂乱，不便于书写和检查

3.二者的关系：JSX会由Babel翻译成JS，因此浏览器是通过执行React.createElement来创建VDOM的。

4.安全，与JavaScript相比，JSX是静态类型的，大多是类型安全的。使用JSX进行开发时，应用程序的质量会变得更高，因为在编译过程中会发现许多错误，它也提供编译器级别的调试功能。

---

既然在编译的时候都会编译成React.createElement的语法，那么为什么不使用模板、模板字符串。JXON呢？

在面向对象的编程设计中有一个核心概念称为关注点分离，是指将代码分隔成不同的部分的设计原则，目的在于简化程序的开发和维护，当关注点分开时各部门可以重复使用已经独立开发更新

模板的缺点是：模板的关注点分离比较弱，它更关注的是技术栈的分离，而不是关注点；模板引入了更多的概念，新的模板语法，模板指令

模板字符串的缺点：代码结构更加复杂，开发时候语法提示性差

JXON的缺点：开发时候语法提示性差，开发困难

---

Babel 插件如何实现 JSX 到 JS 的编译？

Babel 读取代码并解析，生成 AST，再将 AST 传入插件层进行转换，在转换时就可以将 JSX 的结构转换为 React.createElement 的函数。如下代码所示：

module.exports = function (babel) {
  var t = babel.types;
  return {
    name: "custom-jsx-plugin",
    visitor: {
      JSXElement(path) {
        var openingElement = path.node.openingElement;
        var tagName = openingElement.name.name;
        var args = []; 
        args.push(t.stringLiteral(tagName)); 
        var attribs = t.nullLiteral(); 
        args.push(attribs); 
        var reactIdentifier = t.identifier("React"); //object
        var createElementIdentifier = t.identifier("createElement"); 
        var callee = t.memberExpression(reactIdentifier, createElementIdentifier)
        var callExpression = t.callExpression(callee, args);
        callExpression.arguments = callExpression.arguments.concat(path.node.children);
        path.replaceWith(callExpression, path.node); 
      },
    },
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23