ES5開發(fā)中，對應(yīng)五個方法：getDefaultProps,getInitialsate, ??componentWillMount??, ??render??, ??componentDidMount??
ES6開發(fā)中，移除了前兩個方法：componentWillMount, render, componentDidMount

第一個階段組件定義默認屬性數(shù)據(jù)

defaultProps靜態(tài)屬性中定義

組件尚未創(chuàng)建

第二個階段組件初始化狀態(tài)數(shù)據(jù)

在構(gòu)造函數(shù)中定義constructor

一定要執(zhí)行super(props)，實現(xiàn)構(gòu)造函數(shù)繼承，并且要傳遞屬性數(shù)據(jù)參數(shù)

繼承之后，this.props與props就沒有區(qū)別了

我們?yōu)閠his.state賦值，機可以初始化，

在構(gòu)造函數(shù)中，我們可以訪問屬性數(shù)據(jù)，因此可以用屬性數(shù)據(jù)為狀態(tài)數(shù)據(jù)賦值

這樣就實現(xiàn)了數(shù)據(jù)有外部流入內(nèi)部

第三個階段組件即將被構(gòu)建

通過componentWillMount方法定義

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，并且無法訪問虛擬DOM

我們可以提前請求數(shù)據(jù)，我們也可以為需要在虛擬DOM中使用的插件，初始化。

第四個階段渲染組件

我們通過render方法定義

返回值是渲染的虛擬DOM

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，無法訪問虛擬DOM

所以我們在渲染虛擬DOM的時候，可以用屬性數(shù)據(jù)或者狀態(tài)為虛擬DOM賦值

第五個階段組件構(gòu)建完成

我們通過componentDidMount方法定義

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，也可以訪問虛擬DOM

因此我們可以在這個階段，發(fā)送請求，綁定事件等實現(xiàn)一些交互

該階段方法執(zhí)行完畢，標志著組件創(chuàng)建期的結(jié)束，存在期的開始，

所以該方法在組件實例化對象的一生中，只執(zhí)行一次。

我們可以在這個階段修改狀態(tài)數(shù)據(jù)，

一旦??屬性???或者??狀態(tài)??數(shù)據(jù)發(fā)生改變，組件將進入存在期。

獲取虛擬DOM

在渲染庫（react-dom）中,提供了findDOMNode的方法，可以獲取虛擬DOM對應(yīng)的真實DOM元素。

// 定義組件
class GoTop extends Component {
// 2 初始化狀態(tài)數(shù)據(jù)
constructor(props) {
super(props);
// 狀態(tài)
// 用屬性數(shù)據(jù)，為狀態(tài)數(shù)據(jù)初始化
this.state = {
text: props.text
}
console.log(222, 'constructor', this, arguments)
}
// 3 組件即將構(gòu)建
componentWillMount() {
console.log(333, 'componentWillMount', this, arguments, findDOMNode(this))
}
// 4 渲染虛擬DOM
render() {
console.log(444, 'render', this, arguments)
return <span>{this.state.text}</span>
}
// 5 組件構(gòu)建完成
componentDidMount() {
console.log(555, 'componentDidMount', this, arguments, findDOMNode(this))
}
}
// 1 默認屬性數(shù)據(jù)
GoTop.defaultProps = {
text: '返回頂部'
}
// 渲染組件
render(<GoTop />, app)