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