State&生命周期

React中組件生命周期如下圖：

image.png

從上圖中也可以看出，組件在構(gòu)造函數(shù)中有state，也就是狀態(tài)。狀態(tài)與屬性十分相似，但是狀態(tài)時私有的，完全受控于當前組件。需要使用類組件類添加這個狀態(tài)的能力。

在具有多組件的應用程序中，在銷毀時釋放組件占用的資源非常重要。
每當組件第一次添加到DOM中的時候，會調(diào)用componentDidMount函數(shù)，我們稱之為掛載。每當組件從DOM被移除的時候，會調(diào)用componentWillUnmount函數(shù)，我們稱之為卸載。這些函數(shù)被稱作生命周期鉤子。

正確使用狀態(tài)

在構(gòu)造函數(shù)中，初始化state的時候，我們可以使用this.state = {} 的形式，對state進行初始化。但是在其他函數(shù)中來對state進行更新的時候，需要注意：
直接更新狀態(tài)，代碼不會重新渲染組件也就是如下寫法是錯誤的：

this.state.comment = 'Hello';

應當調(diào)用setState()函數(shù)：

 this.setState({comment:'Hello'});

雖然傳入函數(shù)的是一個對象，但是React不會使用這個對象直接覆蓋掉原來的state對象，而是將state中comment的值替換為字符串Hello，如果沒有則創(chuàng)建。

狀態(tài)更新可能是異步的

React可以將多個setState()調(diào)動合并成一個調(diào)用來提高性能，因為每調(diào)用一次，如果state的值發(fā)生改變，就要render渲染一次，如果多個setState()合并調(diào)用那就會只渲染一次。
需要知道的是this.props和this.state可能是異步更新的，所以不能依靠它們的值來計算下一個狀態(tài)。比如如下代碼可能無法更新計數(shù)器:

this.setState({
  counter: this.state.counter + this.props.increment
});

可以使用setState()的第二種形式，即參數(shù)不是一個對象，而是一個函數(shù)。這個函數(shù)有兩個參數(shù)：第一個是先前的狀態(tài)，第二個是修改時使用的props對象：

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)更新合并

如前文所說，setState()函數(shù)設(shè)置對象到state中時，是合并更新，不是覆蓋更新。如下邊的代碼，兩次調(diào)用對state中另外的字段是沒有影響的。
state有如下兩個屬性：posts和comments：

constructor(props) {
  super(props); 
  this.state = {
    posts:[],
    comments:[]
  };
}

可以調(diào)用setState()單獨更新posts和comments:

componentDidMount() {
  fetchPosts().then(response => {
    this.setState({
      posts: response.posts
    });
  });
  fetchPosts().then(response => {
    this.setState({
      comments: response.comments
    });
  });
}

這里的合并是淺合并，也就是說this.setState({comments})完全保留了this.state.posts,但完全替換了this.state.comments。

數(shù)據(jù)自頂向下流動

父組件或者子組件都不能知道其他組件是有狀態(tài)還是無狀態(tài)。并且也不應該關(guān)心其他組件是被定義為類組件還是函數(shù)組件。
也就是說狀態(tài)除了擁有它的組件，其他組件是不可訪問的。也是為什么狀態(tài)被曾為局部或者封裝。其實就是狀態(tài)只在組件內(nèi)部可見。
組件可以選擇將其狀態(tài)作為屬性傳遞給其子組件：

<h1>it is {this.state.date.toLocaleTimeString()}</h1>

如上是針對標準的Html DOM標簽所表示的組件或者元素，用戶自定義組件也可以：

<FormattedDate date={this.state.date} />

那么例如對于函數(shù)組件FormattedDate而言：

 function FormattedDate(props) {
  return <h1> it is {props.date.toLocaleTimeString()} </h1>
}

FormattedDate組件并不知道其屬性date是來自哪個組件，比如是來自Clock組件的狀態(tài)還是來自Clock組件的屬性，或者是來起手動輸入呢？

這種數(shù)據(jù)傳遞的方式被稱為自頂向下或者單項數(shù)據(jù)流。任何狀態(tài)始終由某些特定組件所有，并且該狀態(tài)導出的任何數(shù)據(jù)或者UI只能影響樹中的下方的組件。

在React應用程序中，組件是有狀態(tài)還是無狀態(tài)被認為是可能隨時間而變化的組件的實現(xiàn)細節(jié)?？梢栽谟袪顟B(tài)組件中使用負狀態(tài)組件，反之亦然。