componentWillMount 和 componentDidMount的區別

一、呼叫時期不同

轉自：https：//www。cnblogs。com/xyn0909/p/8516074。html

1、componentWillMount 將要裝載，在render之前呼叫；

componentDidMount，（裝載完成），在render之後呼叫

2、componentWillMount 每一個元件render之前立即呼叫；

componentDidMount render之後並不會立即呼叫，而是所有的子元件都render完之後才可以呼叫

3、componentWillMount 可以在服務端被呼叫，也可以在瀏覽器端被呼叫；

componentDidMount 只能在瀏覽器端被呼叫，在伺服器端使用react的時候不會被呼叫

二、

注意，如果在shouldComponentUpdate裡面返回false可以提前退出更新路徑。

React元件生命週期的測試

class LifeCycle extends React。Component { constructor（props） { super（props）； alert（“Initial render”）； alert（“constructor”）； this。state = {str： “hello”}； } componentWillMount（） { alert（“componentWillMount”）； } componentDidMount（） { alert（“componentDidMount”）； } componentWillReceiveProps（nextProps） { alert（“componentWillReceiveProps”）； } shouldComponentUpdate（） { alert（“shouldComponentUpdate”）； return true； // 記得要返回true } componentWillUpdate（） { alert（“componentWillUpdate”）； } componentDidUpdate（） { alert（“componentDidUpdate”）； } componentWillUnmount（） { alert（“componentWillUnmount”）； } setTheState（） { let s = “hello”； if （this。state。str === s） { s = “HELLO”； } this。setState（{ str： s }）； } forceItUpdate（） { this。forceUpdate（）； } render（） { alert（“render”）； return（

{“Props：”}

{parseInt（this。props。num）}

{“State：”}

{this。state。str}

）； }} class Container extends React。Component { constructor（props） { super（props）； this。state = { num： Math。random（） * 100 }； } propsChange（） { this。setState（{ num： Math。random（） * 100 }）； } setLifeCycleState（） { this。refs。rLifeCycle。setTheState（）； } forceLifeCycleUpdate（） { this。refs。rLifeCycle。forceItUpdate（）； } unmountLifeCycle（） { // 這裡解除安裝父元件也會導致解除安裝子元件 ReactDOM。unmountComponentAtNode（document。getElementById（“container”））； } parentForceUpdate（） { this。forceUpdate（）； } render（） { return （

propsChange setState forceUpdate unmount parentForceUpdateWithoutChange

）； }} ReactDom。render（， document。getElementById（‘container’））；作者：linjinhe連結：https：//www。jianshu。com/p/4784216b8194來源：簡書簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

三、 componentWillMount 和 componentDidMount 那個更適合請求資料？

轉自： https：//blog。csdn。net/u011135887/article/details/79239328

有兩個方法可以請求資料：

componentWillMount

componentDidMount

除了這兩個函式，render方法肯定不是合適的請求資料的地方，因為在React-Native中請求資料都是非同步的（fetch），如果這樣做肯定會帶來一些不好的影響。下面分析一兩個方法的優缺點。

componentWillMount

這個方法正確呼叫的時候是在component第一次render之前，所以第一眼看上去覺得就應該在這裡去fetch datas。

但是這裡有個問題，在非同步請求資料中這一次返回的是空資料，因為是在’render’之前不會返回資料。所以在渲染的時候沒有辦法等到資料到來，也不能在componentWillMount中返回一個Promise（因為Promise的特性之一就是狀態不可變），或者用setTimeout也是不適合的。正確的處理方式就不要在這裡請求資料，而是讓元件的狀態在這裡正確的初始化。

順便說一句在es6中，使用extend component的方式裡的constructor函式和componentWillMount是通用的作用，所以你在構造函數里初始化了元件的狀態就不必在WillMount做重複的事情了。

componentDidMount

componentDidMount呢？這個生命週期函式在是在render之後呼叫一次，component已經初始化完成了。

在生產時，componentDidMount生命週期函式是最好的時間去請求資料，其中最重要原因：使用componentDidMount第一個好處就是這個一定是在元件初始化完成之後，再會請求資料，因此不會報什麼警告或者錯誤，我們正常請教資料完成之後一般都會setState。

————————————————

版權宣告：本文為CSDN博主「天矇矇亮」的原創文章，遵循CC 4。0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。

原文連結：https：//blog。csdn。net/qq_38719039/article/details/82378434