目錄
一、資料載入時
二、資料更新時
三、元件銷毀
constructor-->componentwilmount-->render-->componentdidmount
注:在版本16.4之後,廢除了componentwillmount,則順序如下:
constructor()-->static getderivedstatefromprops()-->render()-->componentdidmount()
import react, from 'react'
export default class lifecycle extends component
//元件將要被掛載
componentwillmount()
//元件掛載完成
componentdidmount()
render()
}
場景: 當我們接收到新的屬性想去修改我們state，可以使用getderivedstatefromprops
class examplecomponent extends react.component ;
static getderivedstatefromprops(nextprops, prevstate) ;
}// return null to indicate no change to state.
return null;
}}
版本更新後順序:
static getderivedstatefromprops()-->static shouldcomponentupdate()-->render()-->staticgetsnapshotbeforeupdate()-->componentdidupdate()
import react, from 'react'
export default class lifecycle extends component
console.log('01 建構函式');
}shouldcomponentupdate = (nextprops, nextstate) =>
//元件更新前
componentwillupdate()
//元件更新完成
componentdidupdate()
updata=()=>)
}render()
}
//子元件中
componentwillunmount()
//父元件中
import react, from 'react';
import lifecycle from './components/lifecycle'
constructor(props)
} destroy=()=>)
} render()
元件建立與銷毀
);}}
static getderivedstatefromerror()
componentdidcatch()
1. 在 v16版本後 引入了 fiber機制，fiber將原先的同步渲染改為非同步渲染
2. 由於原先有些生命週期可能會被打斷，所以可能會出現多次呼叫的情況，因此替換方案如下:
2.1 gederivedstatefromprops 替換 componentwillreciveprops
2.2 getsnapshotbeforeupdate 替換 componentwillupdate
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 效能優化 減少無謂的渲...