react.js 从零开始(三)JSX 语法及特点介绍
2015-08-31 23:06
771 查看
什么是jsx?
jsx = JavaScript + xml
jsx 是一种 Ecmascript 的一种新标准。
jsx 是一种 带有结构性的语法。
jsx 的特点:
1.类xml语法易于理解。
2.增强js语意。
3.结构清晰。
4.抽象程度高,易于跨平台。
5.代码模块化。
如何使用jsx?
上面 是一段jsx的语法、我们在使用的时候要注意一下几点。
1. HolleWorld 是元素名 首字母必须大写。 jsx 会把首字母小写的标签当做默认的html 标签进行解析。
2. 嵌套 通过 {this.props.name} ,可以向jsx组件里面添加一个文本节点。
3. 注释 注释可以引用js默认的 注释方式 不过要通过大括号括起来。
4. 在jsx中使用样式 , jsx把样式做了处理可以通过直接 传入对象的方式进行样式添加。
5. jsx内部可以使用js各种表达式,函数,运算等。。
[b]jsx非dom属性?[/b]
除了与 DOM 的差异之外,React 也提供了一些 DOM 里面不存在的属性。
总结:
关于jsx 简易理解和使用方法 就介绍到这里了。。如果大家对这个有兴趣可以 阅读jsx解析器源码。。
大家下期再见哦。
jsx = JavaScript + xml
jsx 是一种 Ecmascript 的一种新标准。
jsx 是一种 带有结构性的语法。
jsx 的特点:
1.类xml语法易于理解。
2.增强js语意。
3.结构清晰。
4.抽象程度高,易于跨平台。
5.代码模块化。
如何使用jsx?
var style={color:"red"}; var HolleWorld = React.createClass({ render: function() { return <p style={style}>holle world {this.props.name}
{ /*这里是多行注释*/ //这里是单行注释
} </p>; } }); React.render( <HolleWorld name="sdsd" />, container );
上面 是一段jsx的语法、我们在使用的时候要注意一下几点。
1. HolleWorld 是元素名 首字母必须大写。 jsx 会把首字母小写的标签当做默认的html 标签进行解析。
2. 嵌套 通过 {this.props.name} ,可以向jsx组件里面添加一个文本节点。
3. 注释 注释可以引用js默认的 注释方式 不过要通过大括号括起来。
4. 在jsx中使用样式 , jsx把样式做了处理可以通过直接 传入对象的方式进行样式添加。
5. jsx内部可以使用js各种表达式,函数,运算等。。
[b]jsx非dom属性?[/b]
除了与 DOM 的差异之外,React 也提供了一些 DOM 里面不存在的属性。
key:可选的唯一的标识器。当组件在
渲染过程中被各种打乱的时候,由于差异检测逻辑,可能会被销毁后重新创建。给组件绑定一个 key,可以持续确保组件还存在 DOM 中。
ref:父组件引用子组件。
dangerouslySetInnerHTML:提供插入纯 HTML 字符串的功能,主要为了能和生成 DOM 字符串的库整合。
总结:
关于jsx 简易理解和使用方法 就介绍到这里了。。如果大家对这个有兴趣可以 阅读jsx解析器源码。。
大家下期再见哦。
相关文章推荐
- 使用Redux管理你的React应用
- ReactiveCocoa入门教程:第一部分
- ReactiveCocoa-基础
- [React] Linting React JSX with ESLint (in ES6)
- react
- ReactiveCocoa2 源码浅析
- react.js 从零开始(二)组件的生命周期
- react.js 从零开始(一)
- React学习笔记(7)---动画效果实现
- React学习笔记(6)---组件协同使用介绍
- ReactiveCocoa信号使用方法
- React学习笔记(5)--事件
- React 实践记录 02 Flux introduction
- React组件开发入门
- Facebook React Native 中文教程一:介绍
- ReactiveCocoa Documents 翻译(基于版本V2.5)
- java设计模式-reactor模式
- React 实践记录 01 组件开发入门
- ReactiveCocoa2 源码浅析
- [React] React Fundamentals: Precompile JSX