生命週期函式指在某乙個時刻元件會自動呼叫執行的函式
constructor當元件建立的時刻會被元件自動呼叫執行, 它也是初始化的位置. 在這裡定義 state, 接收 props, 但是它是 es6 語法中就帶的
render 函式當資料(state 和 props 發生改變)發生變化的時刻元件會自動呼叫執行, 所以它就是個生命週期函式
在 constructor它也是初始化的位置. 在這裡定義 state, 接收 props
元件第一次掛載到頁面的流程
初始化之後, 乙個元件要被渲染然後掛載到頁面上, 它會經歷乙個流程: mounting
componentwillmount – > render --> componentdidmount
componentwillmount: 在元件即將被掛載到頁面的時刻自動執行(還未掛載到頁面)
render: 做頁面掛載
componentdidmount: 在元件被掛載到頁面之後自動被執行
componentwillmount和 componentdidmount 只在掛載的時候被執行, 掛載也就是元件第一次被放到頁面上的時候元件更新的流程props 發生變化的時候:它倆只有在第一次掛載的時候執行
componentwillreceiveprops --> shouldcomponentupdate --> componentwillupdate --> render --> componentdidupdate
componentwillreceiveprops:
如果乙個元件沒有 props 引數的情況下, 這個生命週期函式不會執行.
當乙個元件從父元件接收了引數,
如果這個元件第一次存在于父元件中, 不會執行
如果這個元件之前已經存在于父元件中, 才會執行
shouldcomponentupdate:
元件被更新之前, 它會自動被執行.它要求返回乙個布林值. 來決定元件之後是否要被更新, true 要被更新, false 不要更新. 當資料發生改變的時候, scu 會先被執行一次, 如果函式返回 false, 後面的函式都不會執行了.如果返回 true, 意思是資料改變, 告訴 react 這個元件需要被更新, 就繼續往下走生命週期函式
componentwillupdate:
元件被更新之前, 它會自動執行, 但是他在 scu 之後被執行, 如果 scu 返回 true 它才執行, 如果返回 false, 這個函式就不會被執行
render: 這時頁面知道資料發生變化了, render 函式就重新渲染虛擬 dom
componentdidupdate:
元件更新完成之後, 它會被執行
把元件從頁面上去除的過程
componentwillunmount:
當元件即將被從頁面中剔除的時候, 會被執行. 注意是即將
首先, 頁面初始化, constructor 裡面做 props 和 state 的設定
元件要被掛載到頁面上, 掛載中有三個函式會被自動執行. 首先是 componentwillmount, 接著是 render, 再是 componentdidmount.
然後當元件發生變化的時候, 資料發生變化頁面發生變化, 這些過程中一些函式會被自動呼叫, 首先呼叫 scu, 返回 true 的話繼續往下走, 返回 false 就停掉. 返回 true, 首先走 componentwillupdate, 然後走 render 函式, 再走 componentdidupdate, 假設乙個元件從父元件接收 props 引數, 當父元件重新渲染的時候, 子元件的 componentwillreceiveprops 被執行, 最後當乙個元件要從頁面上被移除的時候, 該元件的 componentunmount 會被執行.
render 函式或生命週期必須有,因為
元件繼承自 component 這個元件, 缺省內置了除了 render 的所有生命週期函式, 所以對於元件來說, render 函式必須自己來定義.
shouldcomponentupdate的作用場景:
// nextprops 指的是接下裡 props 會變化成什麼樣
// nextstate 同理
shouldcomponentupdate
(nextprops, nextstate)
else
}
scu, 提高 react 元件的效能, 因為可以避免無謂的元件 render 函式
setstate 可以把多次計算合併成一次
一般放在 componetdidmount() 裡.
為什麼不放在 render 函式裡, 渲染前請求呢? 因為這會造成死迴圈, 因為 render 函式會被反覆執行, 比如在 input 框中輸入內容, render 函式就重新執行, ajax 請求就重新傳送, 那麼很顯然不合理, 因為 ajax 請求獲取一次資料就行.
那麼哪個生命週期函式只執行一次呢? 就是 componentdidmount, 就是只在元件被掛載到頁面上的時候被執行一次, 之後就不重新重複執行了.
那為什麼不放在同樣只執行一次的 componentwillmount 裡呢, 但是當我們寫 react native 或者用 react 做伺服器端的同構時, 如果在這裡寫 ajax 請求, 會產生衝突.
需要用 axios幫助傳送 ajax.
React中的生命週期
主要指的是繼承react.component建立出來的元件的生命週期 參考vue的生命週期做的筆記，react和vue的生命週期都差不多，有錯的可以告訴我，我再改 created 元件被建立了 mounted 元件被掛載到dom中了 updated 元件被掛載到瀏覽器上了 unmounted 元件被...
React 生命週期 生命週期方法
生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...
react 生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...