react開發教程（五）生命週期

在組件的整個生命週期中，隨着該組件的props或者state發生改變，其DOM表現也會有相應的變化。一個組件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。

一個React組件的生命週期分爲三個部分：實例化、存在期和銷燬時。

實例化

當組件在客戶端被實例化，第一次被建立時，如下方法依次被調用：

• getDefaultProps 設置屬性的默認值。 es6對應 deftaultProps
• getInitialState 用來初始化每一個實例的state。 es6 對應 constructor函數中的this.state
• componentWillMount 渲染前
• render 渲染
• componentDidMount 渲染後

當組件在服務端被實例化，首次被建立時，如下方法依次被調用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render

componentDidMount 不會在服務端被渲染的過程當中調用。

getDefaultProps

對於每一個組件實例來說，這個方法只會調用一次，該組件類的全部後續應用，getDefaultPops 將不會再被調用，其返回的對象能夠用於設置默認的 props(properties的縮寫) 值。

getInitialState

對於組件的每一個實例來講，這個方法的調用有且只有一次，用來初始化每一個實例的 state，在這個方法裏，能夠訪問組件的 props。每個React組件都有本身的 state，其與 props 的區別在於 state只存在組件的內部，props 在全部實例中共享。

getInitialState 和 getDefaultPops 的調用是有區別的，getDefaultPops 是對於組件類來講只調用一次，後續該類的應用都不會被調用，而 getInitialState 是對於每一個組件實例來說都會調用，而且只調一次。

每次修改 state，都會從新渲染組件，實例化後經過 state 更新組件，會依次調用下列方法：
一、shouldComponentUpdate
二、componentWillUpdate
三、render
四、componentDidUpdate

可是不要直接修改 this.state，要經過 this.setState 方法來修改。

componentWillMount

該方法在首次渲染以前調用，也是再 render 方法調用以前修改 state 的最後一次機會。

render
該方法會建立一個虛擬DOM，用來表示組件的輸出。對於一個組件來說，render方法是惟一一個必需的方法。render方法須要知足下面幾點：

• 只能經過 this.props 和 this.state 訪問數據（不能修改）
• 能夠返回 null,false 或者任何React組件
• 只能出現一個頂級組件，不能返回一組元素
• 不能改變組件的狀態
• 不能修改DOM的輸出

render方法返回的結果並非真正的DOM元素，而是一個虛擬的表現，相似於一個DOM tree的結構的對象。react之因此效率高，就是這個緣由。

componentDidMount

該方法不會在服務端被渲染的過程當中調用。該方法被調用時，已經渲染出真實的 DOM，能夠在該方法中經過 this.refs 訪問到真實的 DOM。

class App extends Component {
  static defaultProps = {
    name:"默認值"
  }

  constructor(props) {
    super(props);
    this.state = {
        num : 0
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum(e) {
    e.preventDefault();
    var num = ++this.state.num;
    this.setState({
        num:num
    })
  }

  componentWillMount() {
    this.setState({
        num:10
    })
  }
  render() {

    return (
      <div className="App">
        <div className="App-header" ref="header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React{this.props.name}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.addNum}>{this.state.num}</button>
      </div>
    );
  }

  componentDidMount() {
    console.log(this.refs.header)
  }
}

須要注意的是，因爲 this.refs.[refName] 屬性獲取的是真實 DOM ，因此必須等到虛擬 DOM 插入文檔之後，才能使用這個屬性，不然會報錯。

存在期

此時組件已經渲染好而且用戶能夠與它進行交互，好比鼠標點擊，手指點按，或者其它的一些事件，致使應用狀態的改變，你將會看到下面的方法依次被調用

• componentWillReceiveProps props在父組件改變時執行
• shouldComponentUpdate 若是你肯定組件的 props 或者 state 的改變不須要從新渲染，能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染，返回 `false 則不會執行 render 以及後面的 componentWillUpdate，componentDidUpdate 方法
• componentWillUpdate 這個方法和 componentWillMount 相似，在組件接收到了新的 props 或者 state 即將進行從新渲染前，componentWillUpdate(object nextProps, object nextState) 會被調用，注意不要在此方面裏再去更新 props 或者 state。
• render
• componentDidUpdate 這個方法和 <kdb>componentDidMount<／kdb> 相似，在組件從新被渲染以後，componentDidUpdate(object prevProps, object prevState) 會被調用。能夠在這裏訪問並修改 DOM。

銷燬時

componentWillUnmount

每當React使用完一個組件，這個組件必須從 DOM 中卸載後被銷燬，此時 componentWillUnmout 會被執行，完成全部的清理和銷燬工做，在 componentDidMount 中添加的任務都須要再該方法中撤銷，如建立的定時器或事件監聽器。

當再次裝載組件時，如下方法會被依次調用：

一、getInitialState
二、componentWillMount
三、render
四、componentDidMount

createClass和ES6的不一樣

ES6 class
static propTypes
static defaultProps
constructor (this.state)

對應createClass
propTypes
getDefaultProps
getInitialState

總體流程

ES6 class

static propTypes props值的類型檢查 static defaultProps 設置屬性的默認值
constructor ( this.state ) 初始化每一個實例的state

componentWillMount 該方法在首次渲染以前調用，也是再 render 方法調用以前修改 state 的最後一次機會。
componentDidMount 該方法被調用時，已經渲染出真實的 DOM，能夠在該方法中經過 this.refs 訪問到真實的
DOM。

componentWillUnmount 每當React使用完一個組件，這個組件必須從 DOM 中卸載後被銷燬，此時會被執行
componentWillReceiveProps props在父組件改變時執行 shouldComponentUpdate
若是你肯定組件的 props 或者 state 的改變不須要從新渲染，能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染，返回
`false 則不會執行 render 以及後面的 componentWillUpdate，componentDidUpdate 方法

componentWillUpdate 這個方法和 componentWillMount 相似，在組件接收到了新的 props 或者
state 即將進行從新渲染前， componentDidUpdate 這個方法和
<kdb>componentDidMount<／kdb> 相似，在組件從新被渲染以後，會被調用。能夠在這裏訪問並修改 DOM。 render
渲染組件

上一篇：react開發教程（四）React數據流
下一篇：react開發教程（六）React與DOM