简介
JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。
JSX的特点:
类XML语法容易接受,结构清晰
增强JS语义
抽象程度高,屏蔽DOM操作,跨平台
代码模块化
JSX基本语法规则:
JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
当其中
{arr}
,就是使用到了jsx语法。HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法
JSX语法中有两个要注意的地方:
1.