react元件生命週期鉤子函式
阿新 • • 發佈：2018-11-03
掛載期
constructor 資料接收 實現繼承super(props)
componentWillMount 資料掛載之前 可以操作資料 不可以操作dom
componentDidMount 資料掛載之後 可以操作資料和dom
render 渲染元件 和 html 標籤
更新期
shouldComponentUpdate 檢測元件內的變化 可以用作頁面效能的優化(預設值為true)
componentReceiveProps 接收元件傳入輸入資料
componentWillUpdate 元件更新之前呼叫
componentDidUpdate 元件更新之後呼叫
render
銷燬期
componentWillUnmount 元件銷燬時呼叫 可以做一些記憶體的優化 (全域性變數,閉包,計時器,事件)
| 生命週期 | 呼叫次數 | 能否使用 setSate() |
|---|---|---|
| getDefaultProps | 1(全域性呼叫一次) | 否 |
| getInitialState | 1 | 否 |
| componentWillMount | 1 | 是 |
| render | >=1 | 否 |
| componentDidMount | 1 | 是 |
| componentWillReceiveProps | >=0 | 是 |
| shouldComponentUpdate | >=0 | 否 |
| componentWillUpdate | >=0 | 否 |
| componentDidUpdate | >=0 | 否 |
| componentWillUnmount | 1 | 否 |
元件生命週期的三個狀態：
| Mounting | 已插入真實 DOM |
|---|---|
| Updating | 正在被重新渲染 |
| Unmounting | 已移出真實 DOM |
生命週期的方法：
| 方法 | 作用 |
|---|---|
| componentWillMount | 在渲染前呼叫,在客戶端也在服務端 |
| componentDidMount | 在第一次渲染後呼叫，只在客戶端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問 |
| componentWillReceiveProps | 在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫 |
| shouldComponentUpdate | 返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫 |
| componentWillUpdate | 在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫 |
| componentDidUpdate | 在元件完成更新後立即呼叫。在初始化時不會被呼叫 |
| componentWillUnmount | 在元件從 DOM 中移除之前立刻被呼叫 |