React 組件生命週期

React生命週期

在組件的整個生命週期中，隨着該組件的props或者state發生改變，其DOM表現也會有相應的變化。一個組件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。 一個React組件的生命週期分爲三個部分：實例化、存在期和銷燬時。

(圖片來源: juejin.im/post/5a062f…)

初始化階段

defaultProps

//設置默認props屬性
static defaultProps = {
    name: 'web',
    age:23
};
複製代碼

constructor

//構造函數,能夠用來配聲明tate
constructor() {
    super();
    this.state = {number: 0}
}
複製代碼

componentWillMount

//組件渲染前
componentWillMount(){
    //作一些組建渲染前的操做
}
複製代碼

render

組件渲染

componentDidMount

//組件完成渲染後
conponentDidMount(){
    this.input.focus();
}
複製代碼

運行中

componentWillReceiveProps()

組件接收到屬性變化

shouldComponentUpdate()

用來控制state或props改變後是否須要從新render一個虛擬DOM

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//該鉤子函數能夠接收到兩個參數，新的屬性和狀態，返回true/false來控制組件是否須要更新。
複製代碼

componentWillUpdate()

組件即將被更新時觸發

componentDidUpdate()

組件被更新後觸發，能夠進行DOM操做

銷燬

componentWillUnmount()

組件將要銷燬時的操做