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等，博主会在之后的博文里阐述用法。

感谢您的浏览，希望能有所帮助。

转载于:https://www.cnblogs.com/ghost-xyx/p/5248323.html

ReactJS实用技巧（1）：JSX与HTML的那些不同相关推荐

深度学习11个实用技巧
深度学习11个实用技巧深度学习工程师George Seif发表了一篇博文,总结了7个深度学习的技巧,本文增加了几个技巧,总结了11个深度学习的技巧,主要从提高深度学习模型的准确性和速度两个角度来分析 ...
【老鸟分享】Linux命令行终端提示符多种实用技巧！
1.Linux命令行提示符简介众所周知,Linux命令行是系统管理员管理Linux的重要手段,我们管理Linux,首先要面对的就是Linux命令行提示符. Linux命令行结尾的提示符有" ...
经典 | 深度学习的7大实用技巧
编译 | AI科技大本营参与 | 林椿眄编辑 | 谷磊对于许多具有挑战性的现实问题,深度学习已经成为最有效的解决方法. 例如,对于目标检测,语音识别和语言翻译等问题,深度学习能够表现出最佳的性 ...
深度学习七个实用技巧
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达深度学习已经成为解决许多具有挑战性的现实世界问题的方法.对目标检测 ...
Python大神用的贼溜，9个实用技巧分享给你
来源:数据分析1480 本文约3000字,建议阅读6分钟本文为你介绍一些关于python的实用技巧. 本文会试着介绍一些其它文章没有提到的小技巧,这些小技巧也是我平时会用到的的.让我们一探究竟吧! ...
5 个针对有经验用户的 Vim 实用技巧
Vim 编辑器提供了很多的特性,要想全部掌握它们很困难.然而,花费更多的时间在命令行编辑器上总是有帮助的.毫无疑问,和 Vim 用户们进行交流能够让你更快地学习新颖有创造性的东西. 注: 本文中用到的 ...
ES6的几个实用技巧，你了解吗？
本文给大家分享了es6的几个实用技巧,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Hack #1 交换元素利用数组解构来实现值的互换 let a = 'world', b = 'hello ...
在此处打开命令窗口_这样操作方便多了！简单DOS命令实用技巧详解
分享简单DOS命令实用技巧,让我们的工作.生活更加方便快捷.小编致力于分享分享智能数码.弱电组网.电脑软硬件资讯及实用技巧. 先跟着小编一起来了解一下DOS命令是一个什么样子的存在?技术大牛,请忽略, ...
Windows2003实用技巧
Windows2003实用技巧七则一.跳过磁盘检修等待时间一旦计算机因意外原因,例如突然停电或者死机的话,那么计算机下次重新启动的话,系统就会花10秒钟左右的时间,来运行磁盘扫描程序,检查磁盘是否 ...

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

ReactJS实用技巧（1）：JSX与HTML的那些不同相关推荐

最新文章

热门文章