React生命週期

WindrunnerMax發表於2020-12-05

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 = {})

兩個生命週期

相關文章