一般來說,一個組件類由 extends Component 創建,并且提供一個 render 方法以及其他可選的生命周期函數、組件相關的事件或方法來定義
getInitialState (es5)
初始化 this.state
的值,只在組件裝載之前 調用一次 。
如果是使用 ES6 語法,可以在構造函數 construcror
中初始化state的值。例如:
class Home extends React.Component {
constructor(props){
super(props);
//初始化state
this.state = {
show:false
}
}
}
getDefaultProps (es5)
該方法只在組件創建時 調用一次 并緩存返回的對象(即在 React.createClass 之后就會調用)。
初始化this.props
的值,即在組件裝載后,緩存的結果會用來保證 父組件還沒傳入屬性的值時,訪問 this.props 的屬性,也是有值的。
因在實例初始化之前調用的,故不能使用this
獲取到實例。
如果是使用 ES6
語法,可以直接定義 defaultProps
這個類屬性來初始化props
Home.defaultProps = { initialCount: 0 };
componentWillMount
在首次渲染之前調用,而且 只調用一次。
這里可以修改state
,也是在 render
方法調用之前修改 state 的最后一次機會,不會導致重新渲染(state或者props發生改變并不會觸發)。
也可以做 異步請求數據ajax/fetch
(但不建議,因為DOM還沒有渲染,個時候的一些DOM操作就會出錯)。
此處如更改state會在render()渲染時才能獲取修改后的state
render
渲染組件
這是 唯一必須 的方法:創建虛擬DOM
- 只能通過 this.props 和 this.state 訪問數據(不能修改)
- 可以返回 null,false 或者任何React組件
- 只能出現一個頂級組件,不能返回一組元素
- 不能改變組件的狀態
- 不能修改DOM的輸出
render方法返回的結果并不是真正的DOM元素,而是一個虛擬的表現,類似于一個DOM tree的結構的對象。react之所以效率高,就是這個原因。
componentDidMount
初始化渲染后只調用一次,這時可以獲取相應的DOM節點。
這里可以掛載一些其他的插件之類的,也可以執行異步請求;一般 建議在componentDidMount中異步請求數據
componentWillReceiveProps(nextProps)
初始化渲染不會調用,組件在接受到新的props時調用,nextProps是接受到的新的props,可以通過this.props獲取老的props。例如:當父組件傳入新的props的時候可以在此做些簡單的處理
componentWillReceiveProps(nextProps){
let params = this.params;
let nextParams = nextProps.params;
if (params.sub !== nextParams.sub){
//簡單的邏輯處理
}
}
shouldComponentWillUpdate
初始化渲染不會調用,接收到新的props
或state
時調用
componentWillUpdate
初始化渲染不會調用,更新前調用。組件渲染前執行,接受新的props
、state
或者調用forceUpdate()
componentDidUpdate
初始化渲染不會調用,更新后調用。組件每次渲染都會執行,可以獲取相應的DOM節點
componentWillUnmount
組件被卸載的時候調用。
在componentDidMount
中添加的任務都需要在該方法中撤銷,如創建的定時器、事件監聽器或斷開socket
一般在componentDidMount
里面注冊的事件需要在這里刪除
每次使用this.setState
修改state
時,會依次調用:
* shouldComponentUpdate
* componentWillUpdate
* render
* componentDidUpdate
調用setState
(setState并不是一個同步的方法,可以理解為異步)后,立刻獲取的值,仍然是老值,需要在render
的時候才能獲取修改后的新值;如果想setState
后獲取到更新的值,可以放在回調里;比如:
this.setState({
show:true
},function(){
console.log(this.state.show) //true
})