掛載階段
constructor -> static getderivedstatefromprops -> render -> componentdidmount
constructor(建構函式)：初始化狀態，當然它還接受乙個props引數，可以使用元件傳遞過來的props，通常是用props初始化state。
getderivedstatefromprops： 被static 修飾，靜態方法，這也意味著，在函式裡面不能使用this和例項方法。它接受兩個引數 props 和state，在渲染之前，根據props計算得到state，並返回state。
render(渲染)：元件中render 函式，它是至關重要的，因為元件的目的就是要渲染內容到頁面上，不過它返回是乙個虛擬dom， reactdom 根據它構建出真實的dom渲染到頁面上。它會根據props 和state 渲染出react element, 指導react渲染出真正的dom. 但總存在特殊的情況，元件不需要渲染什麼東西，如驗證使用者有沒有登入的元件，它確實不需要返回什麼，我們只是根據它進行跳轉到不同的頁面，這時直接在render 函式中返回null.
componentdidmount(掛載完成)：當真實的dom 渲染到頁面上會觸發它。 需要注意的是render 函式在呼叫完成後，componentdidmount 並不會立刻呼叫，而是在當所有元件的render函式都呼叫完華之後，每個元件的componentdidmount 才會呼叫。 寫一下**會看得比較清楚，這也是我第一次明白地認識了react的掛載生命週期。
//子元件counter
class
counter extends react.component `);
this.state =
}static
getderivedstatefromprops(props) `);
}render() `);
const buttonstyle =;
return
(
+5}>-
count:
); }
componentdidmount() `);
}}//
class
render()>
"第二個
" initvalue=>
"第三個
" initvalue=>
) }
componentdidmount()
}
元件的掛載生命週期並不是依次呼叫的，render 函式後面並不是緊緊根隨著componentdidmount 函式。只有當三個元件的render函式都呼叫完成後，三個元件的componentdidmount 才連在一起被呼叫。 只有當所有的子元件的componentdidmount都呼叫了，父元件的componetdidmount 才會被呼叫。在componentdidmount 函式的呼叫上，我一直存在誤解，以為render 函式呼叫後，立即執行它，並認為父元件的componentdidmount優於子元件的componentdidmount 執行，真是太想當然了。
現在再來想一下為什麼會有這樣的設計，當使用componentdidmount 的時候，我們聽得最多的一句話可能就是，在這裡，你可以操作真實的dom了，換句話說，當 元件compoentdidmount的時候，真實的dom 已經渲染完畢了，整個頁面都已經渲染完成了。整個頁面就意味著整個dom樹都已經構建完成了，注意這裡是整個dom樹。當react進入到元件的render 函式時，它只知道當前元件長什麼樣子，而不會知道整個dom樹長什麼樣子，所以它只能接著找到第二個元件render， 因為後面有第三個子元件，它還是不知道整個dom樹長什麼樣子，所以它還要找到第三個元件render, 也就是說它會把所有的元件都迴圈一遍，直到能夠構建整個dom樹，它才會渲染真實的dom, 這也是最為省事的辦法，如果它找到乙個渲染乙個，後面的元件再對前面的元件有影響，它要把前面的做法再來一次，效率低下。一次渲染就ok了。 渲染之後，肯定是最深層的元件先完成，只有小的完成了才能組成大的，所以最深層的元件的componentdidmount 先執行， 最外層的最後執行。這讓我們想成了js事件處理階段，當構建dom樹的過程中，它是捕獲階段，從外面找到最裡面，而在渲染真實的dom的時候，componentdidmount的時候，它是冒泡階段， 從最裡面到最外面。
更新階段
static getderivedstatefromprops -> shouldcomponentupdate -> render -> getsnapshotbeforeupdate -> componentdidupdate
getderivedstatefromprops: 和掛載階段用法是一致的, 它適應用一種情況：元件的狀態一直受父元件props的影響， 具體看下面的例項，css 用的是bootstrap的，npm install bootstrap 或 直接cdn link。
//子元件directiondisplay
export class
directiondisplay extends react.component
getclasses()
render() >
}
/*接受props和state(當前元件的), 返回state. 當前元件的state只有兩個屬性lastvalue, direction, 所以在函式返回state的時候，最好也返回這兩個屬性
這裡要注意一點，使用if 判斷，如果props沒有變化的話，直接返回state,
因為update 階段，也會呼叫這個生命週期函式。
*/static
getderivedstatefromprops(props, state)
}return
state;
}}//
父元件class
state =
changecounter = (val) =>)
}render() />
"text-center
">
"btn btn-primary m-1
"onclick=>decrease
"btn btn-primary m-1
"onclick=>increase
}}
shouldcomponentupdate() : 元件應不應該更新，它決定了乙個元件是不是需要重新渲染， 如果它返回fasle, 就表示該元件不需要更新，也就不會重新渲染，它後面的生命週期函式就不會被執行。如果返回true，表示該元件需要更新， 它後面的生命週期函式才會被執行，重新渲染。 接受兩個引數nextprops和nextstate, 可以判斷它們是不是和當前的props 和state 一致，如果一致，就是返回true，表示更新，如果不一致，則返回false，就不更新了。 現在來寫一下componentshouldupdate
//如果父元件傳遞過來的value發生變化，才會返回true, 元件才需要演染。
shouldcomponentupdate(nextprops, nextstate)
render 就是渲染元件了，這沒有什麼可說的。getsnapshotbeforeupdate，在更新之前得到快照，在使用refs的時候會用到，一般也不會用到。 componentdidupdate, 和componentdidmount 用法一致
解除安裝階段，
componentwillunmount 函式，當react 元件要從dom樹上刪掉之前，對應的componentwillunmount函式就會被呼叫，它適合做一些清理性的工作，就是刪除這個元件之前有沒有什麼要清理的。注意它沒有對應的did函式，因為元件刪除以後，沒有什麼事情可以做了。
React生命週期函式
說來慚愧，準大四計算機專業學生黨第一次寫技術部落格。以前學東西沒有記錄的習慣總是容易忘記。最近在看老師的教程學習react框架，想寫點東西記錄一下學習的過程。若寫的不好，各位大佬見諒了，歡迎指正。什麼是生命週期函式？生命週期函式就是元件某一時刻會自動執行的函式。initialzation 初始化 m...
React 生命週期函式
initialization 初始化 mounting 掛載 updation 更新 unmounting setup componentwillmount props states componentwillunmont 當這個元件即將被從頁面中移除的時候，會被執行 props render co...
react生命週期函式
生命週期函式 某一時刻元件會自動呼叫執行的函式 render也是 initialization 初始化 constructor裡 mounting 掛載 componentwillmount 接下來render 生命週期函式的使用場景 不可缺少的乙個生命週期函式是render 效能優化 減少無謂的渲...