State&生命周期
React中組件生命周期如下圖：
從上圖中也可以看出平匈，組件在構(gòu)造函數(shù)中有state托修，也就是狀態(tài)。狀態(tài)與屬性十分相似曲横，但是狀態(tài)時(shí)私有的，完全受控于當(dāng)前組件。需要使用類組件類添加這個(gè)狀態(tài)的能力禾嫉。
在具有多組件的應(yīng)用程序中灾杰，在銷毀時(shí)釋放組件占用的資源非常重要。
每當(dāng)組件第一次添加到DOM中的時(shí)候熙参，會(huì)調(diào)用componentDidMount函數(shù)艳吠，我們稱之為掛載。每當(dāng)組件從DOM被移除的時(shí)候孽椰，會(huì)調(diào)用componentWillUnmount函數(shù)昭娩，我們稱之為卸載。這些函數(shù)被稱作生命周期鉤子黍匾。
正確使用狀態(tài)
在構(gòu)造函數(shù)中栏渺，初始化state的時(shí)候，我們可以使用this.state = {} 的形式锐涯，對(duì)state進(jìn)行初始化迈嘹。但是在其他函數(shù)中來(lái)對(duì)state進(jìn)行更新的時(shí)候，需要注意：
直接更新狀態(tài)全庸，代碼不會(huì)重新渲染組件也就是如下寫法是錯(cuò)誤的：
this.state.comment = 'Hello';
應(yīng)當(dāng)調(diào)用setState()函數(shù)：
this.setState({comment:'Hello'});
雖然傳入函數(shù)的是一個(gè)對(duì)象秀仲，但是React不會(huì)使用這個(gè)對(duì)象直接覆蓋掉原來(lái)的state對(duì)象，而是將state中comment的值替換為字符串Hello壶笼，如果沒(méi)有則創(chuàng)建神僵。
狀態(tài)更新可能是異步的
React可以將多個(gè)setState()調(diào)動(dòng)合并成一個(gè)調(diào)用來(lái)提高性能，因?yàn)槊空{(diào)用一次覆劈，如果state的值發(fā)生改變保礼，就要render渲染一次，如果多個(gè)setState()合并調(diào)用那就會(huì)只渲染一次责语。
需要知道的是this.props和this.state可能是異步更新的炮障，所以不能依靠它們的值來(lái)計(jì)算下一個(gè)狀態(tài)。比如如下代碼可能無(wú)法更新計(jì)數(shù)器:
this.setState({
counter: this.state.counter + this.props.increment
});
可以使用setState()的第二種形式坤候，即參數(shù)不是一個(gè)對(duì)象胁赢，而是一個(gè)函數(shù)。這個(gè)函數(shù)有兩個(gè)參數(shù)：第一個(gè)是先前的狀態(tài)白筹，第二個(gè)是修改時(shí)使用的props對(duì)象：
this.setState((preState, props) => ({
countter: preState.counter + props.increment
}));
如上使用的是箭頭函數(shù)智末，也可以使用常規(guī)函數(shù)：
this.setState(function(preState, props) {
return {
counter: preState.counter + props.increment
};
});
狀態(tài)更新合并
如前文所說(shuō)，setState()函數(shù)設(shè)置對(duì)象到state中時(shí)徒河，是合并更新系馆，不是覆蓋更新。如下邊的代碼顽照，兩次調(diào)用對(duì)state中另外的字段是沒(méi)有影響的由蘑。
state有如下兩個(gè)屬性：posts和comments：
constructor(props) {
super(props);
this.state = {
posts:[],
comments:[]
};
}
可以調(diào)用setState()單獨(dú)更新posts和comments:
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchPosts().then(response => {
this.setState({
comments: response.comments
});
});
}
這里的合并是淺合并，也就是說(shuō)this.setState({comments})完全保留了this.state.posts,但完全替換了this.state.comments。
數(shù)據(jù)自頂向下流動(dòng)
父組件或者子組件都不能知道其他組件是有狀態(tài)還是無(wú)狀態(tài)尼酿。并且也不應(yīng)該關(guān)心其他組件是被定義為類組件還是函數(shù)組件爷狈。
也就是說(shuō)狀態(tài)除了擁有它的組件，其他組件是不可訪問(wèn)的谓媒。也是為什么狀態(tài)被曾為局部或者封裝淆院。其實(shí)就是狀態(tài)只在組件內(nèi)部可見。
組件可以選擇將其狀態(tài)作為屬性傳遞給其子組件：
<h1>it is {this.state.date.toLocaleTimeString()}</h1>
如上是針對(duì)標(biāo)準(zhǔn)的Html DOM標(biāo)簽所表示的組件或者元素句惯，用戶自定義組件也可以：
<FormattedDate date={this.state.date} />
那么例如對(duì)于函數(shù)組件FormattedDate而言：
function FormattedDate(props) {
return <h1> it is {props.date.toLocaleTimeString()} </h1>
}
FormattedDate組件并不知道其屬性date是來(lái)自哪個(gè)組件土辩，比如是來(lái)自Clock組件的狀態(tài)還是來(lái)自Clock組件的屬性，或者是來(lái)起手動(dòng)輸入呢抢野？
這種數(shù)據(jù)傳遞的方式被稱為自頂向下或者單項(xiàng)數(shù)據(jù)流拷淘。任何狀態(tài)始終由某些特定組件所有，并且該狀態(tài)導(dǎo)出的任何數(shù)據(jù)或者UI只能影響樹中的下方的組件指孤。
在React應(yīng)用程序中启涯，組件是有狀態(tài)還是無(wú)狀態(tài)被認(rèn)為是可能隨時(shí)間而變化的組件的實(shí)現(xiàn)細(xì)節(jié)∈研可以在有狀態(tài)組件中使用負(fù)狀態(tài)組件结洼，反之亦然。
