目录:

  1. 容器组件
  2. JSX可展开属性
  3. 动画 : CSS3 Transition
  4. 默认属性
  5. 复用代码:mixin

容器组件

React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组件。比如:

  1. //JSX
  2. <ezpanel title="title">
  3. <p>this is demo content</p>
  4. </ezpanel>

上例中的EzPanel声明了一个面板组件,而面板的内容在定义组件时是不可知的, 这些内容需要被加入到EzPanel渲染后的DOM元素中。

在React中,使用this.props.children就可以访问React子元素,这样我们 就可以轻松地将未知的React子元素包含到容器中:

  1. var EzPanel = React.createClass({
  2.   render : function(){
  3.     return <div class="ez-panel">
  4.         {this.props.children}
  5.         </div>;
  6.   }
  7. });

JSX可展开属性

在JSX中,有时一个React元素的属性很多,比如在示例代码中设置音量推子组件 的属性:

  1. //JSX
  2. <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>

JSX有一个很好的特性让我们可以给React元素设置一个JSON对象作为属性包,这个属性 包将按照字段展开为分立的React元素的属性,被称为可展开属性。使用如下 方式在React元素上声明一个可展开属性,其中propbag是一个JSON对象:

  1. <any {...propbag}=""></any>

比如,前面的示例使用可展开属性的方式改写为:

  1. //定义属性包
  2. var props = {
  3.   className : "ez-slider",
  4.   onMouseDown : this.onMouseDown,
  5.   onMouseUp : this.onMouseUp,
  6.   onMouseMove : this.onMouseMove
  7. };
  8.  
  9. //传入属性包
  10. var rel = <div {...props}=""></div>;

动画 : CSS3 Transition

在React中可以使用CSS3 Transition为组件增加过渡效果。不过,由于 CSS3 Transition需要DOM属性的变化才能触发,所以我们需要将属性改变后的React 元素重新渲染到真实DOM上,才可以触发过渡效果。

大致来讲,在React中使用CSS3 Transition有以下步骤:

  1. 为元素声明transition样式
  2. 设置属性初始值,第一次渲染元素
  3. 设置属性目标值,第二次渲染元素

在示例代码中,为了实现过渡效果,我们使用了一个内部状态mounted 来实现第二次渲染:当初次渲染完成功后,通过setState()方法我们触发 了再次渲染。第二次渲染时,我们重新设置了样式,以便激活过渡过程。

需要注意的一点是window.getComputedStyle()方法的应用,调用 这个方法的目的是刷新DOM的样式,以便确保之前设置的样式已经被应用到DOM 上了。

默认属性

对于一个组件来讲,通常应该有一些默认的属性值,这样即使调用者没有 显示的指定某个属性值,依然可以通过this.props获得该值。这简化了属性值 缺失引起的错误检查。

在React中定义组件时,使用getDefaultProps()方法声明默认属性:

  1. var EzDemoComp = React.createClass({
  2.   //设置默认属性值
  3.   getDefaultProps:function(){
  4.     return {
  5.       value : 0
  6.     }
  7.   },
  8.   render: function(){
  9.     //使用this.props.value访问属性,如果用户没有设置,则该值为默认值
  10.     return <div classname="ez-demo">{this.props.value}</div>;
  11.   }
  12. });
  13. //创建React元素时没有指定属性值
  14. React.render(<ezdemocomp></ezdemocomp>,
  15. document.querySelector("#content"));

复用代码:mixin

如果多个组件的实现代码中有一些公共的部分,那么可以使用React的mixin特性 将这部分代码提出来公用。mixin是掺合,混合,糅合的意思,即可以将一个对象的属性 拷贝到另一个对象上。

在React中,使用mixin有两个步骤:

  • 定义一个mixin对象

mixin对象是一个JavaScript对象,这个对象的属性将被拷贝到React组件类的原型对象上:

  1. var EzLoggerMixin = {
  2. log:function(){
  3. //sth. happened here.
  4. }
  5. };
  • 在定义组件时使用这个mixin对象

在使用React.createClass()定义组件时,给传入的原型对象设置mixins属性:

  1. React.createClass({
  2. mixins:[EzLoggerMixin],
  3. render:function(){
  4. //your render stuff.
  5. }
  6. });

mixins属性是一个数组,这意味着可以指定多个mixin对象,但记住这些 mixin对象、以及在createClass()中传入的原型对象,它们的属性不能同名。

参考资料:http://www.dwz.cn/27ZDWr

React高级特性的更多相关文章

  1. ActiveMQ中的Destination高级特性(一)

    ---------------------------------------------------------------------------------------- Destination ...

  2. Python3学习(二)-递归函数、高级特性、切片

    ##import sys ##sys.setrecursionlimit(1000) ###关键字参数(**关键字参数名) ###与可变参数不同的是,关键字参数可以在调用函数时,传入带有参数名的参数, ...

  3. 云端卫士实战录 | Java高级特性之多线程

    <实战录>导语 一转眼作为一名Java开发者已经四年多时间了,说长不长说短不短,对于java的感情还是比较深的,主要嘛毕竟它给了我饭吃.哈哈,开个玩笑.今天我想借此机会来和大家聊聊Java ...

  4. javascript高级特性

    01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...

  5. Visual Studio 2015 速递(4)——高级特性之移动开发

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  6. Android TextView高级特性使用

    TextView一般都是用来显示一段文本,这里说的高级特性主要是一些我们平常不太常用的属性.包括文字阴影.自定义字体.html嵌入多格式.字体加粗.插入图片.这些特性平时开发APP的时候,可能一般使用 ...

  7. Python的高级特性8:你真的了解类,对象,实例,方法吗

    Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...

  8. Python的高级特性7:闭包和装饰器

    本节跟第三节关系密切,最好放在一起来看:python的高级特性3:神奇的__call__与返回函数 一.闭包:闭包不好解释,只能先看下面这个例子: In [23]: def outer(part1): ...

  9. VQuery高级特性

    VQuery高级特性 css方法 同时设置多个--for in 链式操作 链式操作 函数,链式操作 css 方法链式操作 json的使用 阻止冒泡,默认事件 VQuery插件 插件机制 可以扩展库的功 ...

随机推荐

  1. OSG入门即osgEarth建立一个地球的详细步骤

    OSG入门即osgEarth建立一个地球的详细步骤 转:http://blog.csdn.net/xiaol_deng/article/details/9246291 最近在学习有关osg的知识,刚开 ...

  2. 史上最全的Win8快捷键大全

    下列的 Win8 快捷键列表汇总均收集自网络,未全部实测,也有可能有Win7时代的热键混迹其中,不管怎样,如有错漏,欢迎大家指正! Win8 常用快捷键: Win键 可在开始屏幕主菜单及最后一个应用程 ...

  3. iOS性能优化:Instruments使用实战

    iOS性能优化:Instruments使用实战   最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instrument ...

  4. iosiPhone屏幕尺寸、分辨率及适配

    iosiPhone屏幕尺寸.分辨率及适配     1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...

  5. signal(SIGPIPE, SIG_IGN)

    文章来源:http://blog.163.com/niuxiangshan@126/blog/static/170596595201221942952676/   当服务器close一个连接时,若cl ...

  6. Eclipse中添加PyDev插件

    思路 1.启动Eclipse, 2.点击Help->Install New Software... 3.在弹出的对话框中,点Add 按钮. 4.Name中填:Pydev, Location中填h ...

  7. android-时间选择器和日期选择器

    一.实现动态输入日期和时间 * DataPicker(日历选择器) * DataPicker对象以init()方法指定DatePicker初始的年月日及OnDateChangedListener事件 ...

  8. Hbuider 同步github

    别人的教程,仅作收藏. http://blog.csdn.net/u011871921/article/details/44238971

  9. Eclipse tomcat先启动成功,然后再报超时原因之一

    eclipse ,tomcat及环境设置都没错,通过上网搜资料发现是因为本机浏览器设置了代理,导致elipse启动tomcat时也启用代理,最后在eclipse中取消代理,成功启动,如下设置: Pre ...

  10. jQuery cdn使用介绍

    如果您不希望下载并存放jQuery,那么也可以通过 CDN(内容分发网络)引用它,下面是具体实现,有类似需求的各位可以参考下哈,希望对你有所帮助   如果您不希望下载并存放 jQuery,那么也可以通 ...