ReactJS基礎(續)

前邊的ReactJS基礎，咱們能夠了解到，對於React，能夠說是萬物皆組件 React的組件應該具備 可組合（Composeable）可重用（Reusable）可維護（Maintainable）的特徵，因此咱們儘可能將組件最小化，寫的儘量的小 前邊已經介紹了組件的寫法，下面咱們來進一步瞭解一下組件的屬性、狀態、生命週期和嵌套

組件的屬性

咱們來編寫一個組件SayHello，有一個name屬性，而後輸出hello + name的值，代碼以下：

 

var SayHello = React.createClass({
    render:function(){
        return <h1 style={{color:"red"}}>hello {this.props.name}</h1>
    }
});

ReactDOM.render(
    <SayHello name="lyx" />,
    document.getElementById('great')
)

 結果

有些細節須要注意：

1.建立的組件名稱首字母必須大寫。
2.<SayHello name="lyx" />與 document.getElementById('great')之間用的是逗號分隔

   3.獲取屬性的值用的是 this.props.屬性名

   4.組件的style屬性的設置方式也值得注意，要寫成style={{width:「」100"}}這種形式

 組件的狀態

組件免不了要與用戶互動，React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI 。咱們來看代碼

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>點我！點擊次數爲: {this.state.clickCount}</h2>);
  }
});

上面代碼實現的是點擊h2,顯示點擊次數，效果如圖所示

須要注意是的是

1.getInitialState函數必須有返回值，能夠是NULL或者一個對象。

2.訪問state的方法是this.state.屬性名。

3.變量用 { }包裹，不須要再加雙引號。

組件的嵌套

前邊咱們說了，組件要有複用的特色，線面來看一下如何複用

來看下邊的代碼

var Form= React.createClass({
    render:function(){
        return <div>
        {this.props.inputName}:<input type="text"/>
        
        </div>
    }
});
var Iname= React.createClass({
    render : function(){
        return <div>
            <h3>歡迎</h3>
            <Form inputName="姓名"/>
            <Form inputName="電話"/>
            <button>submit</button>
        </div>
    }
});
ReactDOM.render(
    <Iname />,
    document.getElementById('sub')
)

這裏咱們建立了一個Form組件，而後又建立了一個Iname組件，而後咱們在Inmae組件中調用Form組件兩次，這裏咱們經過屬性inputName傳入值

 

 組件生命週期

 

組件的生命週期可分紅三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被從新渲染
• Unmounting：已移出真實 DOM

生命週期的方法有：

componentWillMount 在渲染前調用,在客戶端也在服務端。

componentDidMount : 在第一次渲染後調用，只在客戶端。以後組件已經生成了對應的DOM結構，能夠經過this.getDOMNode()來進行訪問。 若是你想和其餘JavaScript框架一塊兒使用，能夠在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操做(防止異部操做阻塞UI)。

componentWillReceiveProps 在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用。

shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
能夠在你確認不須要更新組件時使用。

componentWillUpdate在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用。

componentDidUpdate 在組件完成更新後當即調用。在初始化時不會被調用。

componentWillUnmount在組件從 DOM 中移除的時候馬上被調用。

這些就跟PHP中的一些魔術方法同樣，知足條件自動調用，

下面以componentDidMount方法爲例，

var Hello = React.createClass({
  getInitialState: function () {
    return {
      color: "red"
    };
  },
 
  componentDidMount: function () {
   
         alert("111");
  
  },
 
  render: function () {
    return (
      <div style={{color: this.state.color}}>
        Hello {this.props.name}
      </div>
    );
  }
});

此方法是第一次渲染後調用，就有以下結果