React生命週期

WindrunnerMax發表於2020-12-05
React

React生命週期

mount（裝載）

1.constructor(只執行一次)

初始化state（根據props生成state也可以在這裡進行）

constructor(props) {
    super(props)
    ……
    this.state = {
        
    }
    ……
}
複製程式碼

2.componentWillMount

(1)在17版本中將變成UNSAFE_componentWillMount

(2)元件將要mount,這裡是唯一一個可以直接同步修改state並且在頁面正確（同步）渲染的地方

(3)將要被廢棄的元件，實際上沒什麼作用，有人喜歡在這裡做ajax請求，但官方不推薦在這裡做ajax請求

3.render

構建虛擬DOM

4.componentDidMount(只執行一次)

(1)真實的DOM已經渲染到頁面上，可以再這裡獲取真的的DOM

(2)如果要使用第三方的DOM框架，應該在這裡去初始化

(3)ajax請求也推薦在這個週期來進行，有資料返回之後，去setState，將會執行到update階段

update（更新）

1.props有改變：

在17版本中將變成UNSAFE_componentWillReceiveProps

componentWillReceiveProps(nextProps,nextState),如果在constructor裡面，有通過props來生成state這樣的操作，這裡也得做同樣的操作，在這的this.props還是原來的

2.shouldComponentUpdate(nextProps, nextState)

唯一一個做react優化餓生命週期，必須返回一個布林值，如果是false,就不會再往下執行，一般會根據nextProps VS this.props 或者nextStste VS this.state去判斷返回true還是false

3.componentWillUpdate

在17版本中將變成UNSAFE_componentWillUpdate

4.render

重新構建虛擬DOM

5.componentDidUpdate

真的DOM已經更新到頁面上

unMount（銷燬）

1.componentWillUnMount

在這裡去清空定時器之類的東西

新增

static getDerivedStateFromProps(props, state) {
    在這裡沒有this
    需要return 一個物件
}
複製程式碼

不管是mount還是update階段都會執行

注意：

在老版本里（<16），使用createClass,這裡可以有

getDefaultProps(新版本直接在class裡寫 static defaultProps = {})

和

getInitialState(新版本直接在constructor裡寫this.state= {}或者直接在class裡寫 state = {})

兩個生命週期

相關文章