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

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

时间: 2024-10-22 00:24:43

ReactJS实用技巧(1): JSX与HTML的那些不同的相关文章

Mac预览怎么用 Mac预览功能实用技巧大全

Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具,接下来Pc6苹果小编给大家详细介绍一下Mac预览功能实用技巧. 目前的 Mac 预览程式可以支持 TIFF. PNG. JPEG. GIF. BMP. PDF 等主要文件格式的浏览与编辑,而单纯预览上也可以支持像是 Photoshop 等专业图像处理软件. Office 等专业文书处理软件所产生的特殊文件格

iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式

iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https://github.com/HanGangAndHanMeimei/Code 一.使用for循环 要遍历字典.数组或者是集合,for循环是最简单也用的比较多的方法,示例如下: 1 //普通的for循环遍历 2 -(void)iteratorWithFor 3 { 4 //////////处理数组/////

NSString的八条实用技巧

NSString的八条实用技巧 有一篇文章写了:iOS开发之NSString的几条实用技巧 , 今天这篇,我们讲讲NSString的八条实用技巧.大家可以收藏起来,方便开发随时可以复制粘贴. 0.首字母大写 代码: //首字母大写 NSString *string = @"ligang"; NSLog(@"string: %@",[string capitalizedString]); 打印: 2015-07-16 23:06:11.652 iOSStrongDem

Android开发:TVBox智能机顶盒开发实用技巧分享

本文旨在指导想要进入Android TVBox智能机顶盒开发领域或刚刚进入Android TVBox开发领域的新人带路,愿你们越走越远! 实用工具篇 Eclipse+ADT 别问它干嘛用的,我也不知道. SercureCRT SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,同时支持Telnet和rlogin协议. SecureCRT是一款用于连接运行包括Windows.UNIS和VMS的远程系统的理想工具. 通过使用内含的VCP命令行程序可以进行加密文件的传输.有流行CR

程序员在编程开发中的10个实用技巧

程序员在编程开发中的10个实用技巧,下面是我自己在工作中学到的一些简单的技巧和策略,希望能对各位有用.1.     橡皮鸭调试法不知道各位有没有这样的经历,当你正在给别人描述问题的时候,突然灵机一动想到了解决方案?这种情况的产生是有科学依据的.高谈阔论能让我们的大脑重新有条理地组织问题.在这种情况下,你的聊天对象就是“橡皮鸭”.团队中的每个人都应该积极主动乐意地成为彼此的“橡皮鸭”.有时候,如果你幸运的话,你的“橡皮鸭”搞不好还能给出有效的建议呢.2.     快速信息反馈一旦写好代码就要尽快得

iOS实用技巧 - 简易实现多皮肤功能

前言:不记得谁说的了,中国的用户大概是世界上最喜欢多皮肤功能的用户了.我很讨厌写安卓程序,图形界面设计工具及其难用,还不如手写,编辑器慢如蜗牛,智能提示总是跟不上我输入的速度,相同的功能,安卓的代码量至少是iOS的三倍,每写一行代码,都觉得自己的手指在滴血.可是安卓灵活统一的style功能确实很贴心!5之前,iOS平台上实现相同的功能一直没有个比较好的办法. iOS5之后,苹果将所有界面组件的设定,都绑定在一个叫UIAppearance的协议上了,你可以简单的通过UIAppearance设定组件

iOS实用技巧 - AFNetworking2安全的使用自签证书访问HTTPS

友情提示:本文使用的AFNetworking是最新git pull的2.3.1版本,如果想确认你机器上的AFNetworking版本,请打git tag命令查看. 绝大部分iOS程序的后台服务都是基于RESTful或者WebService的,不论在任何时候,你都应该将服务置于HTTPS上,因为它可以避免中间人攻击的问题,还自带了基于非对称密钥的加密通道!现实是这些年涌现了大量速成的移动端开发人员,这些人往往基础很差,完全不了解加解密为何物,使用HTTPS后,可以省去教育他们各种加解密技术,生活轻

雅思论文写作的实用技巧

既然我们搞清楚了问题所在,那么,如何针对以上问题提高雅思议论文的写作能力呢?经过长期的教学实践,笔者总结出可供广大中国考生学习和借鉴的方法. (一)增大阅读量. 古语道:“读书破万卷,下笔如有神.”写作是语言输出的实践过程,只有达到一定量的输入,才会有源源不断的输出.因此,广大中国的考生们要多读英文报纸杂志,如ChinaDaily,21st Century,EnglishSalon,EnglishWorld等. 之所以这样做,是因为阅读可以起到一箭数雕的作用.其一,可以提高阅读能力.其二.可以扩

【开发工具】vim编辑器实用技巧总结

总结一些我们在平时使用vim编辑器的一些实用功能,后续会一直更新. 1.  visual插件 visual插件其实相当于一个书签作用,比如我们在一篇很长的源代码文件中,我们可以标记一行,然后后来我们再想回到这一行时,只需要一个快捷键就能迅速定位到这一行,非常方便,不用不停地往上或往下翻. 1.1  常用命令 1.  mm标记一个标签: 2.  F2回到被标记的那一行: 3.  连续按两次mm就可以取消标签: 4.  shift+F2可以在几个标签来回切换: 2.  emmet.vim插件 emm