JSX语法简介
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
JSX简介
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
如下(JS写法)
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
等价于(JSX写法)
var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响。另外,由于JSX只是一种语法,因此JavaScript的关键字class, for等也不能出现在XML中,而要如例子中所示,使用className, htmlFor代替,这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.
JSX语法介绍
大括号里是JavaScript,不要加引号,加引号就会被当成字符串。
三元表达式
JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式.例如:
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
上述代码经过JSX编译后会得到:
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
数组递归
数组循环,数组的每个元素都返回一个React组件。
var lis = this.todoList.todos.map(function (todo) {
return (
<li>
<input type="checkbox" checked={todo.done}>
<span className={'done-' + todo.done}>{todo.text}</span>
</li>
);
}); var ul = (
<ul className="unstyled">
{lis}
</ul>
);
JSX中绑定事件
JSX让事件直接绑定在元素上。
<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称,大括号中仍然是标准的JavaScript表达式,返回一个事件处理函数。
React并不会真正的绑定事件到每一个具体的元素上,而是采用事件代理的模式:在根节点document上为每种事件添加唯一的Listener,然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件,React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理,但是其API和使用方法与原生事件一致。
JSX中使用样式
在JSX中使用样式和真实的样式也很类似,通过style属性来定义,但和真实DOM不同的是,属性值不能是字符串而必须为对象。
例如:
<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
或者
var style = {
color: '#ff0000',
fontSize: '14px'
}; var node = <div style={style}>HelloWorld.</div>;
要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式,基本上属性名的转换规范就是将其写成驼峰写法,例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”,这和标准的JavaScript操作DOM样式的API是一致的。
HTML转义
在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:
var content='<strong>content</strong>'; React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);
自定义组件
组件定义之后,可以利用XML语法去声明,而能够使用的XML Tag就是在当前JavaScript上下文的变量名,该变量名就是组件名称。
文章来源:
http://www.infoq.com/cn/articles/react-jsx-and-component
JSX语法简介的更多相关文章
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- freemarker语法简介
ftl是一种模板标记语言,用于渲染数据,输入html结构.语法简介如下: ${book.name} ${book.name?if_exists} //值是否存在 ${book.name??} //值是 ...
- Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...
- Android系统Recovery工作原理之使用update.zip升级过程---updater-script脚本语法简介以及执行流程(转)
目前update-script脚本格式是edify,其与amend有何区别,暂不讨论,我们只分析其中主要的语法,以及脚本的流程控制. 一.update-script脚本语法简介: 我们顺着所生成的脚本 ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 2. React JSX语法及特点介绍
什么是JSX JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...
- react的jsx语法
在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...
- react实战项目开发(2) react几个重要概念以及JSX语法
前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...
随机推荐
- c#模拟js escape方法
public static string Escape(string s) { StringBuilder sb = new StringBuilder(); byte[] ba = System.T ...
- 【HTML】 frame和iframe的区别
1.frame不能脱离frameSet单独使用,iframe可以: 2.frame不能放在body中:如下可以正常显示: <!--<body>--> <frameset ...
- 关于图片的PNG与JPG、JIF格式
一:GIF(Graphics Interchange Format) 简介 GIF图形交换格式是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像. 它实际上是一种压缩文档,采用LZW压 ...
- 原生JS实战:经典贪吃蛇(开局10倍速度,来看看你最高能得多少分!)
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5875523.html 该程序是本人的个人作品,写的不好,未经本人允许,请 ...
- Ajax表单异步上传(包括文件域)
起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q121-Q123)
Question 121 You are designing a SharePoint 2010 workflow that will be used to monitor invoices. Th ...
- sqlserver下调试sql语句
现在版本的sqlServer已经支持调试功能了,但是在使用的时候用到的却很少(毕竟print习惯了..) 这里做一个笔记,简单的说明一下在sqlserver下调试的方法: declare @i int ...
- 二进制配置文件为什么比json等配置文件效率高
二进制配置文件为什么比json等配置文件高效 项目中用spine做动画,spine可以导出json和二进制的动画配置文件,蛋疼的是spine官方竟然没有提供c的二进制配置解析代码,更没有提供它二进制文 ...
- Android编码规范04
private final String MESSAGE_WARN = "您输入的密码有误,请重新输入!"; private final String CLASS_ONE = &q ...
- iOS 直播-网速监控
iOS 直播-网速监控 CXNetworkSpeed.h // // CXNetworkSpeed.h // CXNetworkSpeedDemo // // Created by xubaoaich ...