實例化?
首次實例化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
實例化完成后的更新
getInitialState
componentWillMount
render
componentDidMount
存在期
組件已存在時的狀態(tài)改變
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
銷毀&清理期
componentWillUnmount
說明
生命周期共提供了10個不同的API。
1.getDefaultProps? 不可以修改這里面的值
作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享。
es6允許將props和propTypes當作靜態(tài)屬性在類外初始化
class MyComponent extends React.Component{}
MyComponent.defaultProps={
? name:"SunnyChuan",
? age:22
};
MyComponent.propTypes={
? name:React.PropTypes.string.isRequired,
? age:React.PropTypes.number.isRequired
};
2.getInitialState? 可以修改這里面的值
作用于組件的實例，在實例創(chuàng)建時調用一次，用于初始化每個實例的state，此時可以訪問this.props。
取值 和? 改值
getInitialState({
title : ‘哈哈哈’
});
取值
this.state.title
改值 -> 重新繪制 : update
this.setState({
title:’哈哈哈哈’
})
?getInitialState 廢棄? 使用constructor(props){? }
取值
{this.state.name}
設置值
this.setState({
? ? name :'hhhhh',
});
static propTypes = {
? ? name: React.PropTypes.string.isRequired,
? };
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? otherChecked: false,
? ? };
? }
? // Class property initializer. `this` will be the instance when
? // the function is called.
? onRadChange = () => {
? ? ...
? };
3.componentWillMount? =>viewWillAppear
在完成首次渲染之前調用，此時仍可以修改組件的state。
4.render? =>? viewDidLoad
必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：
只能通過this.props和this.state訪問數(shù)據(jù)
可以返回null、false或任何React組件
只能出現(xiàn)一個頂級組件（不能返回數(shù)組）
不能改變組件的狀態(tài)
不能修改DOM的輸出
5.componentDidMount? 消耗性能的操作 都在這里去操作 : 加載網(wǎng)絡請求 , 定時器…
真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調用。
6.componentWillReceiveProps
組件接收到新的props時調用，并將其作為參數(shù)nextProps使用，此時可以更改組件props及state。
? ? componentWillReceiveProps: function(nextProps) {
? ? ? ? if (nextProps.bool) {
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? bool: true
? ? ? ? ? ? });
? ? ? ? }
? ? }
7.shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時，可通過該方法進行適當?shù)膬?yōu)化。
在首次渲染期間或者調用了forceUpdate方法后，該方法不會被調用
8.componentWillUpdate
接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。
10.componentWillUnmount? 組件將要移除銷毀內存警告調用
組件被移除之前被調用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創(chuàng)建的定時器或添加的事件監(jiān)聽器。
