React 元件與伺服器通信

元件挂載階段通信

componentDidMount是執行元件與伺服器通信的最佳地方，主要原因有兩個：

1.在componentDidMount中執行伺服器通信可以保證擷取到資料時，元件已經處于挂載狀态，

這是即使要直接操作DOM也是安全的，而componentWillMount無法保證這一點。

2.當元件在伺服器端渲染時，componentWillMount會被調用兩次，一次是在伺服器端，另一次在浏覽器端，而componentDidMount能保證在任何情況下隻會被調用一次，進而不會發送多餘的資料請求。

元件更新階段通信

元件在更新階段需要再次與伺服器通信，擷取伺服器上的最新資料。例如，元件需要以props中某個屬性作為與伺服器通信的請求參數，當這個屬性值發生更新時，元件自然需要與伺服器通信。根據對元件生命周期的了解，componentWillReceiveProps非常适合這個工作。

需要注意的是componentWillReceiveProps并不能保證props一定發生了修改，是以需要對新老props進行對比。

componentWillReceiveProps(nextProps)

這個方法隻在props引起的元件更新過程中，才會被調用。State引起的更新并不會觸發該方法的執行。方法的參數nextProps是父元件傳遞給目前元件的新的props。父元件的render方法的調用并不能保證傳遞給子元件的props發生變化。也就是說nextProps的值可能和子元件目前props的值相等，是以往往需要比較nextProps和this.props來決定是否執行props發生變化後的邏輯，比如根據新的props調用this.setState觸發元件的重新渲染。