React学习教程(2)（react教学视频）-技术教程-四时宝库

1.2 JSX 语法

1.2.1 准备 React 运行环境

第一步：打开编辑器，新建一个 hello-react.html 文件

第二步：粘贴 Hello, world 代码

<!DOCTYPE html>

<html>

<head>

<title>Hello React!</title>

</head>

<body>

var Hello = React.createClass({

render: function render() {

return (

<div>Hello {this.props.name}</div>;

)

}

});

ReactDOM.render(

<Hello name="World"/>,

document.getElementById('example')

);

</script>

</body>

</html>

1.2.2 JSX 语法

JSX 本质

创建 JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套，保持和 HTML 一致的结构，语法上除了在描述组件上比较特别以外，其它和普通的 Javascript 没有区别。并且最终所有的 JSX 都会编译为原生 Javascript。

需要提醒的是，React 的很多例子都是通过 ES6 来写的，但这并不是 JSX 语法，后面我们会有单独的一小节讲解 ES6 的基本语法，不过目前为止我们先将跟多精力放在 JSX 上。

xml 基本规则

JSX 构建组件的规则和 xml 规则一致

嵌套规则

标签可以任意的嵌套

例如：

var CommentBox = React.createClass({

render: function() {

return (

<div>

Hello, world! I am a CommentBox.

<ul>

</ul>

</div>

);

}

});

虽然可以以任意的嵌套，但是标签闭合

标签必须严格闭合，否则无法编译通过

自闭合：

function render() {

return (

)

}

标签闭合:

function render() {

return (

)

}

不能这样：

render 方法返回的组件必须是有且只有一个根组件，错误情况的例子

function render() {

return (

)

}

这样编译不了。

JSX 组件

JSX 组件分为 HTML 组件和 React 组件

HTML 组件就是 HTML 中的原生标签，如：

function render() {
return (
<p> hello, React World </p>
)
}
function render() {
return (
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
)
}

React 组件就是自定义的组件，如

// 定义一个自定义组件
var CustomComponnet = React.createClass({
render: function() {
return (
<div> custom component </div>
)
}
});

组件属性

和 html 一样，JSX 中组件也有属性，传递属性的方式也相同

对于 HTML 组件

function render() {
return (
<p title="title" >hello, React, world </p>
)
}

如果是 React 组件可以定义自定义属性，传递自定义属性的方式：

function render() {

return (

)

}

属性即可以是字符串，也可以是任意的 Javascript 变量, 传递方式是将变量用花括号，

例如:

function render() {

var data = {a: 1, b:2};

return (

)

}

需要注意的地方上，属性的写法上和 HTML 存在区别，在写 JSX 的时候，所有的属性都是驼峰式的写法，如：

function render() {

return (

</div>

)

}

而原生的写法为:

</div>

主要是出于标准的原因，驼峰式是 Javascript 的标准写法，并且 React 底层是将属性直接对应到原生 DOM 的属性，而原生 DOM 的属性是驼峰式的写法，这里也可以理解为什么类名不是 class 而是 className 了, 又因为 class 和 for 还是 js 关键字，所以 jsx 中:

class 要用 className
for 要用 htmlFor

除此之外比较特殊的地方是 data-* 和 aria-* 两类属性是和 HTML 一致的。

JSX 花括号

显示文本

很多情况，我们需要将 JS 中的文本直接显示，做法和显示变量属性一样，用花括号

function render() {
var text = "Hello, World"
return (
<p> {text} </p>
)
}

JSX 花括号

显示文本

很多情况，我们需要将 JS 中的文本直接显示，做法和显示变量属性一样，用花括号

function render() {
var text = "Hello, World"
return (
<p> {text} </p>
)
}

运算

花括号里边实际上除了变量以外，可以是一段 JS 表达式，我们可以利用花括号做简单的运算：

funtion render() {
var text = text;
var isTrue = false;
var arr = [1, 2, 3];
return (
<p>
{text}
{isTrue ? "true" : "false"}
{arr.map(function(it) {
return <span> {it} </span>
})
}
</p>
)
}

JSX 注释

注释的写法如下：

function render() {
return (
<p>
/* 这里是注释内容 */
</p>
)
}

组件命名空间

JSX 可以通过命名空间的方式使用组件, 通过命名空间的方式可以解决相同名称不同用途组件冲突的问题。

如：

function render() {
return (
<p>
<CustomComponent1.SubElement/>
<CustomComponent2.SubElement/>
</p>
)
}

1.2.3 理解 JSX

JSX 的编译方式

JSX 的写法最终会被编译成原生的 Javascript。如果你愿意的话，也可以直接写编译后的 JS, 不过最好是写 JSX, 因为 JSX 的目的就是为了简化写法，并保持和 HTML 相同的开发体验。

JSX 具体的编译方式有两种

在 HTML 中引入 babel 编译器, 如上 Hello World 程序中一样。
离线编译 JSX，通过 babel 编译 JSX，后面我们会讲到。

JSX 到 JS 的转化

Hello World 程序转化为 JS 的代码如下：

var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
ReactDOM.render(
React.createElement(Hello, {name: "World"}),
document.getElementById('container')
);

可以看出：

<Hello .../> <=> React.createElement(Hello, ....)

xml 的写法实际上是调用 React 的工厂方法 createElement。

当理解了 JSX 最终会编译为 JS 就可以理解 JSX 的一些特性如命名空间，组件实际上就是一个 Javascript 对象，命名空间下的组件相当于对象的属性

四时宝库

程序员的知识宝库

React学习教程(2)（react教学视频）