ReactJS实用技巧（1）：JSX与HTML的那些不一样

在项目中使用ReactJS也已经有大半年了，收获不少也踩过很多坑。不想把这个系列写成抄书似的罗列，旨在总结些经常使用的技巧及常见的坑，以帮助初心者快速入门，想系统学习的同窗仍是多阅读文档。

JSX本质上与HTML并多大不要紧，标题所说的不一样是指语法上的不一样。正由于两者比较类似，初心者才会在不少细节地方混淆。

JSX实际是一种语法糖，最终会转换成JavaScript代码，首先咱们看一段React最简单的组件结构：

var HelloReact = React.createClass({ render: function() { return (<h1 className='title'>Hello React</h1>);
 } }); React.render(<HelloReact />, document.querySelector(#container));

首先咱们建立了一个只包含h1标签的组件，并将其保存在名为HelloReact的变量中，以后将其做为标签名，渲染到id为"container"的DOM节点中。

这里要注意的是，组件保存的变量名首字母必须大写，不然没法渲染成功。接下来看下jsx被转义后的语法是什么样的：

var HelloReact = React.createClass({ render: function() { React.createElement('h1', {className: 'title'}, 'Hello world') } }); React.render(<HelloReact />, document.querySelector(#container));

能够看到使用JSX能够大大简化编写难度，这点在多个组件嵌套时更加明显。正由于JSX的存在使得新手对React的学习成本大大下降。

*此文的示例可能是React老版本的语法，新版本的React移除了JSXTransformer.js文件，增长了react-dom.js文件。 博主会在以后的博文中详述新版本的语法及工程建立方法，固然最快的方式仍是查阅官方更新文档。

下面列出类似但又不一样的地方：

 

类名

HTML

<div class="myStyle"></div>

JSX

<div className="myStyle"></div>

 

模板

HTML

var name = 'Daryl', templ = '<p>' + name + '</p>'; //<p>Daryl</p>

 JSX

render: function() { var name = 'Daryl'; return (<p>{name}</p>);
}

在JSX的语法中，大括号括起来的部分会被当作JavaScript代码来解析。不只仅是在标签之间，在class、style等等属性赋值时都可以使用大括号来进行。须要注意的是，大括号之之间只能写表达式，而不能写判断等语句。

render: function() { var a = 1; return (<p>{++a}</p>); //正确
} render: function() {
　　 var a = 1; return (<p>{if (true) {a++;}}</p> //报错
}

对于须要判断状态的状况能够多使用逻辑运算符(||、&&等)以及三目运算符来完成。

render: function() { var status = true; return (<div className={status ? 'styles1' : 'styles2'}></div>);
}

若是判断的逻辑比较复杂，简单的表达式没法知足要求，仍是使用保存于变量中方法。

render: function() { 　　var nowDate = new Date(),
　　　　 today = nowDate.getFullYear() + '.' + Number(nowDate.getMonth()+1) + '.' + nowDate.getDate();
　　return (<p>Today is {today}.</p>); //2016.3.7
}

 

内嵌样式

HTML

<div style="width:30px;height:30px;background-color:red"></div>

JSX

<div style={{width:30,height:30,backgroundColor:'red'}}></div>

能够看到JSX中的style属性并非简单的接收一个字符串，那两层大括号是什么意思呢。其本质是接收一个对象做为参数，最外层的大括号是以前说过的用来解析JS代码的区域，而里面的只是个对象而已。

具体的样式属性名称相似jQuery中的驼峰命名方式。同时可使用如下的写法：

React.create({ 　　render: function() { 　　　　return (<div style={styles.container}>
               　　<p style={styles.title}>标题</p>
               　　<p style={styles.content}>内容</p>
　　　　　　　　</div>);
 } }); var styles = {
　　container: {
　　　　textAlign: 'center'
　　}, 　　title: { 　　　　fontSize: 20, 　　　　fontWeight: bold,
　　　　color: '#000' 　　}, 　　content: { 　　　　fontSize: 13,
　　　　color: 'rgba(0,0,0,0.5)' 　　} };

以上这种方式让样式和内容的耦合下降，代码维护也更方便。只不过在使用React开发中，可能更多的人仍是习惯使用外联样式表来编写CSS。

其实这种写法应用最多的是在开发React Native项目中，经过StyleSheet建立一个样式集，由于React Native的项目不像普通的WEB工程能够很方便的引入样式表。

 

事件绑定

HTML

<div onclick="myFunction()"></div>

JSX 

React.createClass({ render: function() { return (<div onClick={this.handlerClick}>点我！</div>);
 }, handlerClick: function() { alert('让你点你就点？'); } }); 

在JSX中事件属性都是以驼峰命名的方式，HTML中的内嵌事件的编写方式在JSX语法中是无效的。

 

列表

列表是如今的web应用中是不可缺乏的一种结构。传统的方式一般为请求到数据集，经过JS遍历生成节点，添加到DOM中：

var dataArr = [1,2,3,4,5,6,7], templ = ''; dataArr.forEach(function(item, index) { templ += '<div>' + item + '</div>'; }); $('body').append(templ);

如上，是咱们使用的一种比较"原始"的方法。React实际上是一个状态机，其中数据结构和视图绑定在一块儿，一切以状态来控制，经过改变数据层触发DOM更改。

虽然在React中也能够直接操做DOM，可是并不提倡，只有在万不得已或者某个东西加入到状态中十分繁琐、代价比较大的状况下才去考虑。

下面咱们看下在JSX中是如何渲染列表的：

render: function() { var dataArr = [1,2,3,4,5,6,7], jsxArr = []; dataArr.forEach(function(item, index) { jsxArr.push(<li>{item}</li>);
 }); return (<ul>{jsxArr}</ul>);
}

上例中jsxArr实为一个每项均为JSX标签模板的数组，这段代码反映出React中一个很重要的特性，JSX标签以前的多子节点能够以数组的方式插入，理解这点就能很快地绕过了React中列表的坑。只是在实际开发中咱们一般使用下面的方式：

render: function() { var dataArr = [1,2,3,4,5,6,7]; return (<ul> 　　{ 　　 dataArr.map(function(item, index) { 　　return (<li>{item}</li>);
 　　}); 　　} 　　　　　　 </ul>);
} 

固然在列表模板结构比较复杂的状况下，仍是建议在return以前生成好，并赋值给某一变量，return时在标签之间插入该变量。

除了上述这些不一样点之外，JSX还有着本身独有的某些属性，好比：ref、key等，博主会在以后的博文里阐述用法。

 

感谢您的浏览，但愿能有所帮助。