摘要：在組件的整個(gè)生命周期中，隨著該組件的或者發(fā)生改變，其表現(xiàn)也會(huì)有相應(yīng)的變化。一個(gè)組件的生命周期分為三個(gè)部分實(shí)例化存在期和銷(xiāo)毀時(shí)。該方法會(huì)創(chuàng)建一個(gè)虛擬，用來(lái)表示組件的輸出。渲染組件上一篇開(kāi)發(fā)教程四數(shù)據(jù)流下一篇開(kāi)發(fā)教程六與

在組件的整個(gè)生命周期中，隨著該組件的props或者state發(fā)生改變，其DOM表現(xiàn)也會(huì)有相應(yīng)的變化。一個(gè)組件就是一個(gè)狀態(tài)機(jī)，對(duì)于特定地輸入，它總返回一致的輸出。

一個(gè)React組件的生命周期分為三個(gè)部分：實(shí)例化、存在期和銷(xiāo)毀時(shí)。

當(dāng)組件在客戶(hù)端被實(shí)例化，第一次被創(chuàng)建時(shí)，以下方法依次被調(diào)用：

getDefaultProps 設(shè)置屬性的默認(rèn)值。 es6對(duì)應(yīng) deftaultProps

getInitialState 用來(lái)初始化每個(gè)實(shí)例的state。 es6 對(duì)應(yīng) constructor函數(shù)中的this.state

componentWillMount 渲染前

render 渲染

componentDidMount 渲染后

當(dāng)組件在服務(wù)端被實(shí)例化，首次被創(chuàng)建時(shí)，以下方法依次被調(diào)用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

componentDidMount 不會(huì)在服務(wù)端被渲染的過(guò)程中調(diào)用。

對(duì)于每個(gè)組件實(shí)例來(lái)講，這個(gè)方法只會(huì)調(diào)用一次，該組件類(lèi)的所有后續(xù)應(yīng)用，getDefaultPops 將不會(huì)再被調(diào)用，其返回的對(duì)象可以用于設(shè)置默認(rèn)的 props(properties的縮寫(xiě)) 值。

對(duì)于組件的每個(gè)實(shí)例來(lái)說(shuō)，這個(gè)方法的調(diào)用有且只有一次，用來(lái)初始化每個(gè)實(shí)例的 state，在這個(gè)方法里，可以訪問(wèn)組件的 props。每一個(gè)React組件都有自己的 state，其與 props 的區(qū)別在于 state只存在組件的內(nèi)部，props 在所有實(shí)例中共享。

getInitialState 和 getDefaultPops 的調(diào)用是有區(qū)別的，getDefaultPops 是對(duì)于組件類(lèi)來(lái)說(shuō)只調(diào)用一次，后續(xù)該類(lèi)的應(yīng)用都不會(huì)被調(diào)用，而 getInitialState 是對(duì)于每個(gè)組件實(shí)例來(lái)講都會(huì)調(diào)用，并且只調(diào)一次。

每次修改 state，都會(huì)重新渲染組件，實(shí)例化后通過(guò) state 更新組件，會(huì)依次調(diào)用下列方法：
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

但是不要直接修改 this.state，要通過(guò) this.setState 方法來(lái)修改。

該方法在首次渲染之前調(diào)用，也是再 render 方法調(diào)用之前修改 state 的最后一次機(jī)會(huì)。

render
該方法會(huì)創(chuàng)建一個(gè)虛擬DOM，用來(lái)表示組件的輸出。對(duì)于一個(gè)組件來(lái)講，render方法是唯一一個(gè)必需的方法。render方法需要滿(mǎn)足下面幾點(diǎn)：

只能通過(guò) this.props 和 this.state 訪問(wèn)數(shù)據(jù)（不能修改）

可以返回 null,false 或者任何React組件

只能出現(xiàn)一個(gè)頂級(jí)組件，不能返回一組元素

不能改變組件的狀態(tài)

不能修改DOM的輸出

render方法返回的結(jié)果并不是真正的DOM元素，而是一個(gè)虛擬的表現(xiàn)，類(lèi)似于一個(gè)DOM tree的結(jié)構(gòu)的對(duì)象。react之所以效率高，就是這個(gè)原因。

該方法不會(huì)在服務(wù)端被渲染的過(guò)程中調(diào)用。該方法被調(diào)用時(shí)，已經(jīng)渲染出真實(shí)的 DOM，可以在該方法中通過(guò) this.refs 訪問(wèn)到真實(shí)的 DOM。

class App extends Component {
  static defaultProps = {
    name:"默認(rèn)值"
  }

  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 (
      

        

          
          
Welcome to React{this.props.name}
        
        

          To get started, edit src/App.js and save to reload.
        
        {this.state.num}
      
    );
  }

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

需要注意的是，由于 this.refs.[refName] 屬性獲取的是真實(shí) DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個(gè)屬性，否則會(huì)報(bào)錯(cuò)。

此時(shí)組件已經(jīng)渲染好并且用戶(hù)可以與它進(jìn)行交互，比如鼠標(biāo)點(diǎn)擊，手指點(diǎn)按，或者其它的一些事件，導(dǎo)致應(yīng)用狀態(tài)的改變，你將會(huì)看到下面的方法依次被調(diào)用

componentWillReceiveProps props在父組件改變時(shí)執(zhí)行

shouldComponentUpdate 如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過(guò)在這個(gè)方法里通過(guò)返回 false 來(lái)阻止組件的重新渲染，返回 `false 則不會(huì)執(zhí)行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法

componentWillUpdate 這個(gè)方法和 componentWillMount 類(lèi)似，在組件接收到了新的 props 或者 state 即將進(jìn)行重新渲染前，componentWillUpdate(object nextProps, object nextState) 會(huì)被調(diào)用，注意不要在此方面里再去更新 props 或者 state。

render

componentDidUpdate 這個(gè)方法和 componentDidMount<／kdb> 類(lèi)似，在組件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 會(huì)被調(diào)用。可以在這里訪問(wèn)并修改 DOM。

每當(dāng)React使用完一個(gè)組件，這個(gè)組件必須從 DOM 中卸載后被銷(xiāo)毀，此時(shí) componentWillUnmout 會(huì)被執(zhí)行，完成所有的清理和銷(xiāo)毀工作，在 componentDidMount 中添加的任務(wù)都需要再該方法中撤銷(xiāo)，如創(chuàng)建的定時(shí)器或事件監(jiān)聽(tīng)器。

當(dāng)再次裝載組件時(shí)，以下方法會(huì)被依次調(diào)用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount

ES6 class
static propTypes
static defaultProps
constructor (this.state)
對(duì)應(yīng)createClass
propTypes
getDefaultProps
getInitialState

static propTypes props值的類(lèi)型檢查 static defaultProps   設(shè)置屬性的默認(rèn)值
constructor ( this.state )   初始化每個(gè)實(shí)例的state
componentWillMount   該方法在首次渲染之前調(diào)用，也是再 render 方法調(diào)用之前修改 state 的最后一次機(jī)會(huì)。
componentDidMount    該方法被調(diào)用時(shí)，已經(jīng)渲染出真實(shí)的 DOM，可以在該方法中通過(guò) this.refs 訪問(wèn)到真實(shí)的
DOM。
componentWillUnmount  每當(dāng)React使用完一個(gè)組件，這個(gè)組件必須從 DOM 中卸載后被銷(xiāo)毀，此時(shí)會(huì)被執(zhí)行
componentWillReceiveProps  props在父組件改變時(shí)執(zhí)行 shouldComponentUpdate 
如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過(guò)在這個(gè)方法里通過(guò)返回 false 來(lái)阻止組件的重新渲染，返回
`false 則不會(huì)執(zhí)行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法
componentWillUpdate  這個(gè)方法和 componentWillMount 類(lèi)似，在組件接收到了新的 props 或者
state 即將進(jìn)行重新渲染前， componentDidUpdate   這個(gè)方法和
componentDidMount<／kdb> 類(lèi)似，在組件重新被渲染之后，會(huì)被調(diào)用。可以在這里訪問(wèn)并修改 DOM。 render
渲染組件

上一篇：react開(kāi)發(fā)教程（四）React數(shù)據(jù)流
下一篇：react開(kāi)發(fā)教程（六）React與DOM