深入理解 JSX
2016-08-06 21:09
267 查看
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
你不需要为了 React 使用 JSX,可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
对于非专职开发者(比如设计师)同样比较熟悉。
XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读,优于方法调用和对象字面量的形式。
它没有修改 JavaScript 语义。
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
注意:
由于 JSX 就是 JavaScript,一些标识符像
XML 属性名。作为替代,React DOM 使用
JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成
注意,要想使用
JSX 也支持使用 XML 语法定义子结点:
使用 JSX 编译器 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 HTML
到 JSX 转换器 来把现有 HTML 转成 JSX。
如果你要使用 JSX,这篇 新手入门 教程来教你如何搭建环境。
注意:
JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 (
同样地,JavaScript 表达式可用于描述子结点:
JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用
为什么要使用 JSX?
你不需要为了 React 使用 JSX,可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。对于非专职开发者(比如设计师)同样比较熟悉。
XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读,优于方法调用和对象字面量的形式。
它没有修改 JavaScript 语义。
HTML标签 与 React组件 对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />; React.render(myDivElement, document.body);
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; React.render(myElement, document.body);
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
注意:
由于 JSX 就是 JavaScript,一些标识符像
class和
for不建议作为
XML 属性名。作为替代,React DOM 使用
className和
htmlFor来做对应的属性。
转换
JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成React.createElement的参数。
var Nav; // 输入 (JSX): var app = <Nav color="blue" />; // 输出 (JS): var app = React.createElement(Nav, {color:"blue"});
注意,要想使用
<Nav />,
Nav变量一定要在作用区间内。
JSX 也支持使用 XML 语法定义子结点:
var Nav, Profile; // 输入 (JSX): var app = <Nav color="blue"><Profile>click</Profile></Nav>; // 输出 (JS): var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click") );
使用 JSX 编译器 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 HTML
到 JSX 转换器 来把现有 HTML 转成 JSX。
如果你要使用 JSX,这篇 新手入门 教程来教你如何搭建环境。
注意:
JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
React.createElement里的校验代码。
JavaScript 表达式
属性表达式
要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (
"")。
// 输入 (JSX): var person = <Person name={window.isLoggedIn ? window.name : ''} />; // 输出 (JS): var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ''} );
子节点表达式
同样地,JavaScript 表达式可用于描述子结点:// 输入 (JSX): var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; // 输出 (JS): var content = React.createElement( Container, null, window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) );
注释
JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {}包围要注释的部分。
var content = ( <Nav> {/* 一般注释, 用 {} 包围 */} <Person /* 多 行 注释 */ name={window.isLoggedIn ? window.name : ''} // 行尾注释 /> </Nav> );
相关文章推荐
- 深入理解 JSX
- 深入理解 JSX
- Javascript模块化编程(三):require.js的用法(转)
- js实现文字横向滚动
- js实现文字纵向滚动
- 利用js实现无刷新上传头像(或文件)并显示进度条
- 为什么要用PolyFill(JS中的修补匠)
- javascript中的options.add() options.remove() options(index)或options.item(index)
- JavaScript 原型链
- Comet4jHelloWorld 带参数变动查询
- 表单时间的处理-抛砖引玉
- Video.js 播放rtmp视频流
- JS高级程序设计学习笔记之第三章基本概念(语法,数据类型,流控制语句,函数)——查漏补缺
- 2016.8.6测试解题报告(ship,jsp,digital)
- js 原型,实例的理解
- Javascript模块化编程(二):AMD规范(转)
- 九个Console命令,让js调试更简单
- 原生JS(2)<script>标签
- JavaScript数组中的22个常用方法
- js验证大全