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

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

getInitialState

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

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

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

  render() {
    // ...
  }
}

getDefaultProps

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

因?yàn)檫@個(gè)方法在實(shí)例初始化之前調(diào)用，所以在這個(gè)方法里面不能依賴 this 獲取到這個(gè)組件的實(shí)例。

在組件裝載之后，這個(gè)方法緩存的結(jié)果會(huì)用來保證訪問 this.props 的屬性時(shí)，當(dāng)這個(gè)屬性沒有在父組件中傳入（在這個(gè)組件的 JSX 屬性里設(shè)置），也總是有值的。

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

Counter.defaultProps = { initialCount: 0 };

render

必須

組裝生成這個(gè)組件的 HTML 結(jié)構(gòu)（使用原生 HTML 標(biāo)簽或者子組件），也可以返回 null 或者 false，這時(shí)候 ReactDOM.findDOMNode(this) 會(huì)返回 null。

生命周期函數(shù)

裝載組件觸發(fā)

componentWillMount

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

componentDidMount

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

更新組件觸發(fā)

這些方法不會(huì)在首次 render 組件的周期調(diào)用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸載組件觸發(fā)

• componentWillUnmount

更多關(guān)于組件相關(guān)的方法說明，參見：

• Component Specs
• Component Lifecycle
• Component API