一、生命周期概念:
- 生命周期:簡單來說就是一個事物從出生到消亡的過程就是生命周期,在React中的生命周期,就是組件從創(chuàng)建、掛載到頁面再到卸載組件的過程。
- 意義:生命周期有助于理解組件運行方式、完成復雜組件功能、分析組件中間問題產(chǎn)生的原因等。
- 生命周期鉤子函數(shù)：為開發(fā)人員在不同階段操作提供時機
二、生命周期:
三、掛載階段（constructor => render => componentDidMount）：
掛載階段生命周期鉤子函數(shù)有三個，執(zhí)行順序是
constructor => render => componentDidMount
| 鉤子函數(shù) | 觸發(fā)時機 | 作用 |
|---|---|---|
| constructor | 創(chuàng)建組件時，最先執(zhí)行 | 1. 初始化 state 2. 創(chuàng)建 Ref 等 |
| render | 每次組件渲染都會觸發(fā) | 渲染 UI（注意： 不能調(diào)用 setState() ） |
| componentDidMount | 組件掛載（完成 DOM 渲染）后 | 1. 發(fā)送網(wǎng)絡(luò)請求 2.DOM 操作 |
四、更新階段（render => componentDidUpdate）：
更新階段常用的生命周期函數(shù)有 2 個，執(zhí)行順序是
render => componentDidUpdate
觸發(fā)更新：setState()、forceUpdate()、New props（父組件進行了 render）文章來源：http://www.zghlxwxcb.cn/news/detail-628548.html
| 鉤子函數(shù) | 觸發(fā)時機 | 作用 |
|---|---|---|
| render | 每次組件渲染都會觸發(fā) | 渲染 UI（與掛載階段是同一個 render） |
| componentDidUpdate | 組件更新（完成 DOM 渲染）后 | DOM 操作，可以獲取到更新后的 DOM 內(nèi)容，不要調(diào)用 setState |
五、卸載階段（componentWillUnmount ）：
觸發(fā)時機：組件從頁面中消失。
ReactDOM.unmountComponentAtNode(document.getElementById(‘root’))文章來源地址http://www.zghlxwxcb.cn/news/detail-628548.html
| 鉤子函數(shù) | 觸發(fā)時機 | 作用 |
|---|---|---|
| componentWillUnmount | 組件卸載（從頁面中消失） | 執(zhí)行清理工作（比如：清理定時器等、解綁事件等） |
到了這里，關(guān)于【react】react生命周期鉤子函數(shù)：的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
