一句话解释
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>
上面这个 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 的库']
}
]
}
但是用 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')
)
编译之后将得到这样的代码:
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')
)
React.createElement
会构建一个 JavaScript 对象来描述你HTML结构的信息,包括标签名、属性、还有子元素等
// 语法:
React.createElement(
type,
[props],
[...children]
)
所谓的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);
},
},
};
};