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