React高级特性

目录：

1. 容器组件
2. JSX可展开属性
3. 动画 : CSS3 Transition
4. 默认属性
5. 复用代码：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有以下步骤：

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

在示例代码中，为了实现过渡效果，我们使用了一个内部状态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()中传入的原型对象，它们的属性不能同名。

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