組件生命周期

一般來說，一個組件類由 extends Component 創(chuàng)建，并且提供一個 render 方法以及其他可選的生命周期函數(shù)、組件相關的事件或方法來定義。

{% include './share/simple-component.md' %}

getInitialState

初始化 this.state 的值，只在組件裝載之前調用一次。

如果是使用 ES6 的語法，你也可以在構造函數(shù)中初始化狀態(tài)，比如：

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

  render() {
    // ...
  }
}

getDefaultProps

只在組件創(chuàng)建時調用一次并緩存返回的對象（即在 React.createClass 之后就會調用）。

因為這個方法在實例初始化之前調用，所以在這個方法里面不能依賴 this 獲取到這個組件的實例。

在組件裝載之后，這個方法緩存的結果會用來保證訪問 this.props 的屬性時，當這個屬性沒有在父組件中傳入（在這個組件的 JSX 屬性里設置），也總是有值的。

如果是使用 ES6 語法，可以直接定義 defaultProps 這個類屬性來替代，這樣能更直觀的知道 default props 是預先定義好的對象值：

Counter.defaultProps = { initialCount: 0 };

render

必須

組裝生成這個組件的 HTML 結構（使用原生 HTML 標簽或者子組件），也可以返回 null 或者 false，這時候 ReactDOM.findDOMNode(this) 會返回 null。

生命周期函數(shù)

裝載組件觸發(fā)

componentWillMount

只會在裝載之前調用一次，在 render 之前調用，你可以在這個方法里面調用 setState 改變狀態(tài)，并且不會導致額外調用一次 render

componentDidMount

只會在裝載完成之后調用一次，在 render 之后調用，從這里開始可以通過 ReactDOM.findDOMNode(this) 獲取到組件的 DOM 節(jié)點。

更新組件觸發(fā)

這些方法不會在首次 render 組件的周期調用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸載組件觸發(fā)

• componentWillUnmount

更多關于組件相關的方法說明，參見：

• Component Specs
• Component Lifecycle
• Component API