JSX语法糖
2017-07-31 09:51
85 查看
语法糖:语法糖(Syntactic sugar),是由Peter J. Landin(和图灵一样的天才人物,是他最先发现了Lambda演算,由此而创立了函数式编程)创造的一个词语,它意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西。
JSX语法糖
JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。JSX语法简介
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。一. 三元表达式
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> );
三. 使用样式
<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div> 或者 var style = { color: '#ff0000', fontSize: '14px' }; var node = <div style={style}>HelloWorld.</div>;
四.绑定事件
JSX让事件直接绑定在元素上。 <button onClick={this.checkAndSubmit.bind(this)}>Submit</button> 和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称,大括号中仍然是标准的JavaScript表达式,返回一个事件处理函数。 React并不会真正的绑定事件到每一个具体的元素上,而是采用事件代理的模式:在根节点document上为每种事件添加唯一的Listener,然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件,React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理,但是其API和使用方法与原生事件一致。
JSX注意事项
1.开发依赖jsx语法依赖react.js和jsx的解析器。所以在它之前必须还引入这两种基础文件。
react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。
2.script标签声明
script 标签的 type 属性为 text/babel,这是React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方,都要加上 type=”text/babel”。
相关文章推荐
- React入门:关于JSX语法
- Hello World以及jsx语法糖的介绍
- React入门以及JSX语法理解
- React入门:关于JSX语法
- JSX语法简介
- React之JSX语法
- react与jsx语法介绍--先行篇
- react学习(3)-jsx语法
- 浅谈React的JSX语法(一)
- React 之JSX语法
- React Native学习笔记(2)--React与JSX语法
- vue jsx 使用指南及vue.js 使用jsx语法的方法
- React学习(1)——JSX语法与React组件
- React教程(二)——jsx语法、条件渲染、列表渲染
- 学习 React(jsx语法) + es2015 + babel + webpack
- React中文教程翻译文档 - JSX Syntax(语法)
- JSX语法详解
- react的学习之路之一(1)-------jsx语法;
- jsx语法
- 浅谈React的JSX语法(二)