React高级特性
目录:
- 容器组件
- JSX可展开属性
- 动画 : CSS3 Transition
- 默认属性
- 复用代码:mixin
容器组件
React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组件。比如:
- //JSX
- <ezpanel title="title">
- <p>this is demo content</p>
- </ezpanel>
上例中的EzPanel声明了一个面板组件,而面板的内容在定义组件时是不可知的, 这些内容需要被加入到EzPanel渲染后的DOM元素中。
在React中,使用this.props.children就可以访问React子元素,这样我们 就可以轻松地将未知的React子元素包含到容器中:
- var EzPanel = React.createClass({
- render : function(){
- return <div class="ez-panel">
- {this.props.children}
- </div>;
- }
- });
JSX可展开属性
在JSX中,有时一个React元素的属性很多,比如在示例代码中设置音量推子组件 的属性:
- //JSX
- <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>
JSX有一个很好的特性让我们可以给React元素设置一个JSON对象作为属性包,这个属性 包将按照字段展开为分立的React元素的属性,被称为可展开属性。使用如下 方式在React元素上声明一个可展开属性,其中propbag是一个JSON对象:
- <any {...propbag}=""></any>
比如,前面的示例使用可展开属性的方式改写为:
- //定义属性包
- var props = {
- className : "ez-slider",
- onMouseDown : this.onMouseDown,
- onMouseUp : this.onMouseUp,
- onMouseMove : this.onMouseMove
- };
- //传入属性包
- var rel = <div {...props}=""></div>;
动画 : CSS3 Transition
在React中可以使用CSS3 Transition为组件增加过渡效果。不过,由于 CSS3 Transition需要DOM属性的变化才能触发,所以我们需要将属性改变后的React 元素重新渲染到真实DOM上,才可以触发过渡效果。
大致来讲,在React中使用CSS3 Transition有以下步骤:
- 为元素声明transition样式
- 设置属性初始值,第一次渲染元素
- 设置属性目标值,第二次渲染元素
在示例代码中,为了实现过渡效果,我们使用了一个内部状态mounted 来实现第二次渲染:当初次渲染完成功后,通过setState()方法我们触发 了再次渲染。第二次渲染时,我们重新设置了样式,以便激活过渡过程。
需要注意的一点是window.getComputedStyle()方法的应用,调用 这个方法的目的是刷新DOM的样式,以便确保之前设置的样式已经被应用到DOM 上了。
默认属性
对于一个组件来讲,通常应该有一些默认的属性值,这样即使调用者没有 显示的指定某个属性值,依然可以通过this.props获得该值。这简化了属性值 缺失引起的错误检查。
在React中定义组件时,使用getDefaultProps()方法声明默认属性:
- var EzDemoComp = React.createClass({
- //设置默认属性值
- getDefaultProps:function(){
- return {
- value : 0
- }
- },
- render: function(){
- //使用this.props.value访问属性,如果用户没有设置,则该值为默认值
- return <div classname="ez-demo">{this.props.value}</div>;
- }
- });
- //创建React元素时没有指定属性值
- React.render(<ezdemocomp></ezdemocomp>,
- document.querySelector("#content"));
复用代码:mixin
如果多个组件的实现代码中有一些公共的部分,那么可以使用React的mixin特性 将这部分代码提出来公用。mixin是掺合,混合,糅合的意思,即可以将一个对象的属性 拷贝到另一个对象上。
在React中,使用mixin有两个步骤:
- 定义一个mixin对象
mixin对象是一个JavaScript对象,这个对象的属性将被拷贝到React组件类的原型对象上:
- var EzLoggerMixin = {
- log:function(){
- //sth. happened here.
- }
- };
- 在定义组件时使用这个mixin对象
在使用React.createClass()定义组件时,给传入的原型对象设置mixins属性:
- React.createClass({
- mixins:[EzLoggerMixin],
- render:function(){
- //your render stuff.
- }
- });
mixins属性是一个数组,这意味着可以指定多个mixin对象,但记住这些 mixin对象、以及在createClass()中传入的原型对象,它们的属性不能同名。
React高级特性的更多相关文章
- ActiveMQ中的Destination高级特性(一)
---------------------------------------------------------------------------------------- Destination ...
- Python3学习(二)-递归函数、高级特性、切片
##import sys ##sys.setrecursionlimit(1000) ###关键字参数(**关键字参数名) ###与可变参数不同的是,关键字参数可以在调用函数时,传入带有参数名的参数, ...
- 云端卫士实战录 | Java高级特性之多线程
<实战录>导语 一转眼作为一名Java开发者已经四年多时间了,说长不长说短不短,对于java的感情还是比较深的,主要嘛毕竟它给了我饭吃.哈哈,开个玩笑.今天我想借此机会来和大家聊聊Java ...
- javascript高级特性
01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...
- Visual Studio 2015 速递(4)——高级特性之移动开发
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- Android TextView高级特性使用
TextView一般都是用来显示一段文本,这里说的高级特性主要是一些我们平常不太常用的属性.包括文字阴影.自定义字体.html嵌入多格式.字体加粗.插入图片.这些特性平时开发APP的时候,可能一般使用 ...
- Python的高级特性8:你真的了解类,对象,实例,方法吗
Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...
- Python的高级特性7:闭包和装饰器
本节跟第三节关系密切,最好放在一起来看:python的高级特性3:神奇的__call__与返回函数 一.闭包:闭包不好解释,只能先看下面这个例子: In [23]: def outer(part1): ...
- VQuery高级特性
VQuery高级特性 css方法 同时设置多个--for in 链式操作 链式操作 函数,链式操作 css 方法链式操作 json的使用 阻止冒泡,默认事件 VQuery插件 插件机制 可以扩展库的功 ...
随机推荐
- OSG入门即osgEarth建立一个地球的详细步骤
OSG入门即osgEarth建立一个地球的详细步骤 转:http://blog.csdn.net/xiaol_deng/article/details/9246291 最近在学习有关osg的知识,刚开 ...
- 史上最全的Win8快捷键大全
下列的 Win8 快捷键列表汇总均收集自网络,未全部实测,也有可能有Win7时代的热键混迹其中,不管怎样,如有错漏,欢迎大家指正! Win8 常用快捷键: Win键 可在开始屏幕主菜单及最后一个应用程 ...
- iOS性能优化:Instruments使用实战
iOS性能优化:Instruments使用实战 最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instrument ...
- iosiPhone屏幕尺寸、分辨率及适配
iosiPhone屏幕尺寸.分辨率及适配 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...
- signal(SIGPIPE, SIG_IGN)
文章来源:http://blog.163.com/niuxiangshan@126/blog/static/170596595201221942952676/ 当服务器close一个连接时,若cl ...
- Eclipse中添加PyDev插件
思路 1.启动Eclipse, 2.点击Help->Install New Software... 3.在弹出的对话框中,点Add 按钮. 4.Name中填:Pydev, Location中填h ...
- android-时间选择器和日期选择器
一.实现动态输入日期和时间 * DataPicker(日历选择器) * DataPicker对象以init()方法指定DatePicker初始的年月日及OnDateChangedListener事件 ...
- Hbuider 同步github
别人的教程,仅作收藏. http://blog.csdn.net/u011871921/article/details/44238971
- Eclipse tomcat先启动成功,然后再报超时原因之一
eclipse ,tomcat及环境设置都没错,通过上网搜资料发现是因为本机浏览器设置了代理,导致elipse启动tomcat时也启用代理,最后在eclipse中取消代理,成功启动,如下设置: Pre ...
- jQuery cdn使用介绍
如果您不希望下载并存放jQuery,那么也可以通过 CDN(内容分发网络)引用它,下面是具体实现,有类似需求的各位可以参考下哈,希望对你有所帮助 如果您不希望下载并存放 jQuery,那么也可以通 ...