React Native学习笔记（二）JSX 语法学习

1.什么是JSX

JSX并不是一门新的语言，而仅仅是个语法糖，允许开发者在JavaScript中书写HTML语法。实际上，每个HTML标签最终转化为了JavaScript代码来运行。

React的核心机制之一就是虚拟DOM：可以在内存中创建虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

使用JSX语法可以创建虚拟DOM：

var root =(
<ul className="myList">
<li>Content of node1</li>
<li>Content of node2</li>
</ul>
);

虚拟DOM也可以通过JavaScript来创建，例如：

var node1 = React.createElement('li', null, 'Content of node1');
var node2 = React.createElement('li', null, 'Content of node2');
var rootNode = React.createElement('ul', { className: 'myList' }, node1, node2);

这两段代码是完全等价的，第一种方式将HTML语法直接加入到JavaScript代码中，使得我们能够通过HTML代码高效地定义界面，构建组件及组件之间关系时也会显得很清晰。而第二种方式就没有这种效果，尤其是在DOM结构复杂的时候。

2.JSX语法

1）标签

JSX标签其实就是HTML标签，例如：

<h1>JSX Syntax</h1>

还有一类标签是ReactJS创建创建的组件类标签，例如：

class Hello extends React.Component {
render() {
return (
<div> hello </div>
);
}
}

React.render(
<Hello />
document.getElementById('container')
)

在上面我们创建了一个叫Hello的组件，此时，我们就可以像使用HTML标签一样，通过< Hello/>的方式把它引进来。

需要注意的一点是：ReactJS中约定自定义的组件标签首字母一定要大写，这样区别于HTML标签。

2）JSX中执行JavaScript表达式

JSX本身和XML语法是类似的，可以定义属性以及子元素。其中比较大的一点区别是：JSX中可以用大括号来加入JavaScript表达式。例如：

先定义一个变量：

var msg = "Hello ReactJS!";

在JSX中调用这个变量

<h1> {msg} </h1>

可以看到JSX中运行JavaScript表达式，需要将表达式用｛｝括起来。

3）注释

在JSX中注释也分为单行注释和多行注释，例如：

var msg = "Hello ReactJS !!";
// 这是一个单行注释
<h1>{msg}</h1>
/**
<h1> {msg} </h1> 这是多行注释
**/

4）属性

JSX中可以通过标签上的属性来改变当前元素的样式。例如：

var msg = <h1 width="10px">Hello,ReactJS!</h1>;

在JSX中，我们也可以自定义属性。凡是以 “data-“开头的自定义属性，在页面渲染后均可以显示在页面上。例如：

var hello = <h1 height ="100" data-test="test" test="test"> Hello ReactJS!</h1>
React.render(
hello,
document.getElementById('example')
);

在上面的代码中，data-test标签是能够被渲染到页面上的，而test标签却不能。

在JSX的新特性中，还有一种属性叫着延展属性。传入对象的属性会被复制到组件内，它能被多次使用，也可以和其它属性一起用 。例如：

var props = {};
props.foo = "1";
props.bar = "2";
<h1 {...props} foo = "2"> Hello,ReactJS</h1>

在上面的语法中，由”…”操作符，这是一个延展操作符。…props的意思就是遍历props这个对象。并且将它的所有属性属性都赋值给h1这个元素。这里需要注意的是：元素后面的赋值会覆盖前面的值。如这里foo的值之前的1被2覆盖了。

5）样式使用

在web开发中，大部分场景下我们应该将样式写在独立的CSS文件中。在JSX中，对于某个特定组件而言，其样式相对简单而且独立，一般将其直接定义在JSX中。在JSX中使用样式，通过style属性来定义。例如：

<h1 style={{color: '#ff0000', fontSize: '15px'}}>Hello ReactJS.</h1>

这里第一个大括号是：JSX语法，第二个大括号是:javaScript对象，我们把需要定义的样式都以对象的方式写在这个大括号里。

为了便于理解：我们也可以把一个样式赋给一个变量：然后传进去。例如：

var headStyle = {
color: '#ff0000',
fontSize: '14px'
};

var node = <h1 style={headStyle}>Hello ReactJS.</h1>;

需要注意的是：我们需要将属性名：转为驼峰命名格式，若是不转换的话，需要加引号括起来。例如：

//驼峰的命名格式
fontSize: '14px'
//加引号的方式
'font-size':'14px'

6)事件绑定

例如将一个button绑定点击事件：

function testButtonClick(){
alert('testButtonClick');
}
var button = <button onClick={testButtonClick.bind(this)} Hello ReactJS!></button>
React.render(button,
document.getElementById('example')
);

JSX事件绑定和原生HTML定义事件的区别是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。

参考资料：

http://reactjs.cn/react/docs/jsx-spread.html

http://www.infoq.com/cn/articles/react-jsx-and-component

http://bbs.reactnative.cn/topic/15/react-react-native

《React Native 入门与实战》