React階段 生命週期函式

生命週期函式的存在，就是為了能夠將頁面載入的過程分割開來

便於開發和後期維護，提高效率

掛載階段 (

)unsafe_componentwillmount()

render()

componentdidmount()

修改資料前只會觸發render()方法

修改資料後全部觸發

父元件更新導致子元件更新時，觸發的特殊生命週期函式

componentwillreceiveprops

(nextprops)

還是子元件，自身更新都會觸發的函式

shouldcomponentupdate

(nextprops, nextstate)

componentwillupdate

(nextprops, nextstate)

render()

componentdidupdate

(nextprops, nextstate)

toover()

componentwillunmount()

import  react,

from
"react"
;export
default
class
kids
extends
component
// 父元件更新引起子元件更新
unsafe_componentwillreceiveprops
(nextprops)
//1. 確認是否要更新資料
shouldcomponentupdate
(nextprops, nextstate)
//2. 即將更新資料
unsafe_componentwillupdate
(nextprops, nextstate)
//4. 資料更新完成 
componentdidupdate
(nextprops, nextstate)
ageadd=(
)=>
=this
.state;
age++
;this
.setstate()
}//3. 修改資料便會觸發 render 方法
render()
=this
.state;
let=
this
.props;
return
("name"
>姓名：
<
/div>
"age"
>年紀：
<
/div>
>
中文名<
/button>
}>
年齡增加
<
/button>
<
/div>)}
}掛載階段
static

(props, state)

資料更新階段

首次載入

修改後渲染

解除安裝階段

componentwillunmount()

import  react,

from
"react"
;export
default
class
kids
extends
component
//1. 父元件更新引起子元件更新 
// 該生命週期函式執行時， componentwillupdate(){} 不能存在
static
getderivedstatefromprops
(props, state)
//2. 確認是否要更新資料
shouldcomponentupdate
(nextprops, nextstate)
//2. 即將更新資料 
// 該生命週期函式執行時， static getderivedstatefromprops(){} 不能存在
// componentwillupdate(nextprops, nextstate)
// ❀ 該方法在 render() 之後，但是在輸出到 dom 之前執行
getsnapshotbeforeupdate
(prevprops, prevstate)
ageadd=(
)=>
=this
.state;
age++
;this
.setstate()
}//2. 修改資料便會觸發 render 方法
render()
=this
.state;
let=
this
.props;
return
("name"
>姓名：
<
/div>
"age"
>年紀：
<
/div>
>
中文名<
/button>
}>
年齡增加
<
/button>
<
/div>)}
//4. 修改後元件載入完成
componentdidupdate
(nextprops, nextstate)
//4. 首次載入時觸發
componentdidmount()
//5. 解除安裝元件 
componentwillunmount()
// 6 錯誤處理
static
getderivedstatefromerror
(error, info)
}

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 效能優化 減少無謂的渲...