簡單認識React的生命週期

一. react的生命週期

這裡render渲染函式會執行兩次，第一次是當元件初始化完成的時候，第二次是當元件完成從資料的修改的時候再執行一次

1.建立和初始化到的生命週期：

（1） getdefaultprops（15.6版本的）：初始化props值

（2）componentwillreceiveprops（廢棄）: 這是監聽props值變化的生命週期

（3） getinitialstate（15.6版本）：初始化state值

import react, form 'react'
class running extend component 
這裡是判斷當資料發生改變的時候是否更新頁面的生命週期
shouldcomponentupdate(props,state)   else 
} render () 
// 接收來自在使用該元件的時候傳遞過來的引數
) }}
export default running
這裡是根元件檔案
import react, form 'react'
import running from './life/running'
constructor() 
}  render() 
this.setstate()  
}}>add)}}

掛載階段:

（1）componentwillmount: 掛載之前，在這裡執行的東西是在render（讓虛擬dom轉換為真實dom）函式的前面，這個生命週期在17版本之後就會被廢棄，現在它是乙個不安全的生命週期

（a）可以獲取this以及state裡面的資料，不可以獲取dom元素在這個生命週期裡面修改資料可以直接引起頁面的改變，這是因為這個生命週期的執行是在render渲染函式之前執行的，如果在這個生命週期裡面修改資料，也就是修改資料的時候render還沒有渲染頁面，當執行完這個生命週期之後就去執行render函式，這個時候就會根據這個生命週期修改以後的資料離開渲染頁面（b）但是不會觸發其他執行中的生命週期（c）這個生命週期不常用，不可以在這裡進行資料的網路請求，否則的話有可能會導致資料網路的請求重複執行（d）16.3版本之後的react是非同步渲染（fiber），渲染前的這個生命週期可能會被意外情況打斷，那麼生命週期就會重新執行，所以如果在這個生命週期裡面執行網路請求裡面，可能會造成發起多次的網路請求

（2） componentdidmount：掛載之後，在這個生命週期中有可以獲取到dom元素、資料，一般咋這裡生命週期中做資料的網路請求，以及初始化swiper、better-scroll。

（a）資料的修改不能直接引起頁面的改變，需要通過setstate設定才可以

（b）資料點修改會觸發執行中的生命週期

更新階段：

（1） componentwillreceiveprops: 將要接收改變之後的props值，props裡面的資料發生改變的時候觸發；

（2） shouldcomponentupdate：在這裡判斷，資料的改變是否引起頁面的改變，當沒有在**中寫這個函式的時候，預設返回的是true，資料改變，頁面就會發生改變,所以可以通過在這個生命週期裡面判斷資料是否發生改變來決定是否需要重新更新頁面，來減少dom操作

（a）當在生命週期函式裡面return false;// 當返回false的時候，表示資料發生改變也不改變頁面，就不會再去執行render函式，渲染頁面
（b）當在生命週期函式裡面return true;// 當返回true的時候，表明當資料發生改變的時候，頁面也需要發生改變，這個時候會每改變一次就執行一次render函式渲染介面
（c）shouldcomponentupdate(props,state): 會接收到兩個引數，第乙個引數是props裡面資料改變的值，第二個引數是state裡面資料發生改變的值

（3）componentwillupdate：這裡是元件更新之前。裡面的dom元素以及資料都是更新之前的，這個生命週期也是放在render函式的前面，這個生命週期也即將被廢棄。

在這個生命週期中需要減少對資料進行更改的操作，否則會造成死迴圈，因為資料已更新就會觸發這個生命週期函式

這裡是更新之前的生命週期函式
componentwillupdate () 
}

（4） componentdidupdate: 元件已經個更新完畢，在這個生命週期中需要減少對資料進行更改的操作，否則會造成死迴圈，因為資料已更新就會觸發這個生命週期函式

4.解除安裝階段： componentwillunmount：當元件銷毀的時候執行該生命週期函式

元件檔案
import react, from 'react'
在react中單個檔案可以寫多個元件
class demo extend component 
render () 
}class unmount extend component 
}render () )
}}>切換顯示隱藏
使用demo元件,當show為true的時候顯示，當show為假的時候不顯示 
}}丟擲元件
export default unmount
根元件檔案
import react, from 'react'
在這裡引入解除安裝生命週期例子的元件
import unmount from './life/unmount'
return (
這裡是根元件
使用元件)}

舉個小例子

根元件檔案
import react, from 'react'
在這裡引入生命週期例子的元件
import mount from './life/mount'
return (
這裡是根元件
使用元件
)}

子元件檔案
import react, from 'react'
class mount extend component 
} 這裡是元件掛載之前的生命週期
componentwillmount() 
這個是元件掛載之後的生命週期
componentdidmount() ) //但是可以通過setstate方法來更改資料
}這裡是執行中的生命週期（state值發生改變，或者是props值發生改變 觸發shouldcomponentupdate生命週期），但是當這個生命週期存在這裡的時候，資料發生改變之後並不一定會引起頁面的改變
裡面會接收兩個引數，第乙個引數是props裡面資料改變的值，第二個引數是state裡面資料發生改變的值
shouldcomponentupdate(props,state)   else 
}  render() 
給乙個按鈕用來改變state裡面的資料，當state值發生改變的時候就會觸發shouldcomponentupdate的生命週期，如果寫了這個生命週期，雖然資料會發生改變，但是頁面不會發生改變改值)
}這裡是更新之前的生命週期函式
componentwillupdate () 
這裡是更新結束之後的生命週期函式
componentdidupdate () 
}export default mount

簡單認識React的生命週期

React 生命週期的認識

React 生命週期生命週期方法

react 生命週期

簡單認識React的生命週期

React 生命週期的認識

React 生命週期 生命週期方法

react 生命週期

相關推薦

React 生命週期生命週期方法