React Class組件生命週期

1、react組件的兩種定義方式

一、函數組件，簡單的函數組件像下面這樣，接收Props，渲染DOM，而不關注其餘邏輯

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

函數組件沒法使用State，也沒法使用組件的生命週期方法，沒有this，純展現型組件。

建議：在寫組件時，先思考組件應不該該寫成展現型組件，能寫成展現型組件的儘可能寫成展現型。

二、class組件，須要繼承React.Component，有State，有生命週期，有this

三、共同點

a、不管是使用函數或是類來聲明一個組件，它決不能修改它本身的 props

b、全部 React 組件都必須是純函數，並禁止修改其自身 props

c、React是單項數據流，父組件改變了屬性，那麼子組件視圖會更新

d、屬性 props 是外界傳遞過來的，狀態 state 是組件自己的，狀態能夠在組件中任意修改

e、組件的屬性和狀態改變都會更新視圖

四、組件定義的注意事項

a、組件名稱必須是大寫字母開頭

b、組件的返回值只能有一個根元素

2、class組件不一樣階段生命週期函數執行順序

一、class組件執行順序以下圖

新增：getDerivedStateFromProps，getSnapshotBeforeUpdate

UNSAFE：UNSAFE_componentWillMount，UNSAFE_componentWillUpdate，UNSAFE_componentWillReceiveProps這三個方法17之後的版本會去掉

掛載(Mounting)指組件被實例化並插入到dom中，順序以下：

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新(Updating)指當state變化或者props變化會引發更新，順序以下：

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

卸載指的是組件被從dom移除，只會執行一個生命週期:componentWillUnmount

二、constructor()，在 React 組件掛載時，會首先調用它的構造函數。

做用：一般，在 React 中，在構造函數中只作兩件事：

a、經過給 this.state 賦值對象來初始化內部 state。

b、爲事件處理函數綁定實例

注意：

a、在爲 React.Component 子類實現構造函數時，應在其餘語句以前前調用 super(props)。

不然 this.props 在構造函數中可能會出現未定義的

b、不要在裏邊調用setState

三、componentWillMount()，在 React 組件掛載時render以前。

做用：能夠調用setState方法，修改state。同步方法會阻塞,不會引發二次渲染，異步方法不會阻塞，會

引發二次渲染。

注意：該方法已被標記爲不安全，儘可能不使用。

四、getDerivedStateFromProps((props, state), 靜態方法，爲了讓 props 能更新到組件內部state 中，掛

載和更新時都會調用。

做用：

a、無條件的根據 prop 來更新內部 state，也就是隻要有傳入 prop 值， 就更新 state

b、只有 prop 值和 state 值不一樣時才更新 state 值

注意：

a、不能在方法內使用this

b、若是props傳入的內容不須要影響到你的state，那麼就須要返回一個null，這個返回值是必

須的，因此儘可能將其寫到函數的末尾

異步處理：

之前，咱們能夠在props發生改變的時候，在componentWillReceiveProps中進行異步操做，將

props的改變驅動到state的改變。

react setState操做是會經過transaction進行合併的，由此致使的更新過程是batch的，而react

中大部分的更新過程的觸發源都是setState，因此render觸發的頻率並不會很是頻繁

如今，爲了響應props的變化，咱們應該再componentDidUpdate中進行異步操做，響應變化

五、shouldComponentUpdate(nextProps, nextState)，更新時也就是state或props發生變化時，會在

render執行以前被調用

做用：

a、性能優化的生命週期方法，修改後的props和state在該方法均可以拿到，與原props和state對

比判斷是否須要渲染

注意：

a、此方法的返回值必須是true或者false，返回false將不執行render

六、render()， class 組件中惟一必須實現的方法，純函數

做用：

a、組件和dom節點都寫在這裏，返回一個jsx，通過編輯以後是React.createElement的表達式

注意：

a、組件名稱首字母要大寫

b、只能有一個根節點

c、可使用<></>做爲根節點，這個節點不會渲染，React.Fragment的簡寫

七、getSnapshotBeforeUpdate(prevProps, prevState)，在最近一次渲染輸出（提交到 DOM 節點）

以前調用，未伸入測試，瞭解僅限與此

做用：

a、它使得組件能在發生更改以前從 DOM 中捕獲一些信息（例如，滾動位置）。今生命週期的任何

返回值將做爲參數傳遞給 componentDidUpdate()

八、componentDidMount()， 會在組件掛載後（插入 DOM 樹中）當即調用

做用：

a、setState

b、操做dom

c、發送請求獲取初始數據

九、 componentDidUpdate(prevProps, prevState) ，會在更新(dom已經更新)後會被當即調用

做用：

a、setState

b、操做dom

c、發送請求獲取數據

注意：

a、setState必須被包裹在一個條件語句裏，不然會致使死循環

十、componentWillUnmount()，會在組件卸載及銷燬以前直接調用

做用：在這裏能夠釋放資源, 好比清除定時器, removeEventListener

注意：這裏邊setState是無效的, 不該該調用

十一、getDerivedStateFromError 還未詳細瞭解

十二、componentDidCatch 還未詳細瞭解

 

3、參考

官方生命週期API https://react.docschina.org/docs/react-component.html