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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM