认识JSX
0 Views 前端 with
本文字数:385 字 | 阅读时长 ≈ 2 min

认识JSX

0 Views 前端 with
本文字数:385 字 | 阅读时长 ≈ 2 min

本文主要讲述JSX

JSX

JSX是JavaScript的语法扩展

1
<ClickCounter />

JSX的特点:

  1. 类XML语法容易接受,结构清晰
  2. 增强JS语义
  3. 抽象程度高,屏蔽DOM操作,跨平台
  4. 代码模块化

JSX基本语法规则:

JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

1
2
3
4
5
6
7
8
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);

这个就是一个简单的html与js混用的例子。arr变量中存在html元素,div中又使用了arr这个js变量。转化成纯javascript的话:

1
2
3
4
5
6
7
var h1=React.DOM.h1(null,'Hello world!');
var h2=React.DOM.h1(null,'React is awesome');
var div=React.DOM.div(null,h1,h2);
ReactDOM.render(
div,
document.getElementById('example')
);

React组件

我们使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件。使用React.createClass用于生成一个组件。

1
2
3
4
5
6
7
8
9
var MyComponent=React.createClass({
render: function() {
return <h1>Hello world!</h1>;
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);

上面代码中,变量 MyComponent就是一个组件类。模板插入 时,会自动生成 MyComponent 的一个实例(下文的”组件”都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。