1. 程式人生 > >React生命週期鉤子

React生命週期鉤子

最近的工作都很忙,所以很少完整的時間可以用來總結和回顧知識點,今天就趁著是週末,我準備在這裡複習和回顧一下React的基礎。工作中主要用的vue比較多,在工作中使用React也已經是一年前了,當時用的螞蟻金服的antd框架,相比vue,我個人還是比較喜歡寫React的,其實vue跟React之間除了寫法上的差異,也非常相似的,學會了其中一個,要學另一個的話都是很容易的。

用過React的同學都知道,React的特性之一就是元件化,元件都有一個生命週期,這個生命週期包括元件的例項化、更新與銷燬階段,在元件的不同生命週期鉤子函式裡我們可以對元件進行相應的操作,如更新或者銷燬等。說到React元件,它的寫法也有三種兩大類,一類是無狀態元件,也就是函式式元件,它們也存在例項化、更新、銷燬期,但是沒有對外暴露相應的生命週期鉤子,另一類就是有狀態元件,這一類元件有兩種寫法,第一種寫法就是ES5的React.createClass,第二種寫法則是ES6的React.Component,但是在這篇部落格裡我們不討論React元件的寫法,要了解相關知識的同學請自行百度或者查閱React官方文件,這篇部落格我們主要討論一下有狀態元件的不同生命週期的鉤子函式。

關於React的生命週期,前面也說到了,主要有三個階段:例項化、更新和銷燬。

第一次被建立時,也就是例項化時,以下方法依次被呼叫:

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

當元件已經渲染好後,元件也就進入更新期,在更新期會執行以下函式:

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

最後,每當React使用完一個元件,這個元件必須從 DOM 中解除安裝後被銷燬,此時 componentWillUnmout 會被執行,完成所有的清理和銷燬工作,在 componentDidMount 中新增的任務都需要再該方法中撤銷,如建立的定時器或事件監聽器。

來源地址:https://www.f2ecoder.net/879.html