React 基礎_生命週期

xuanxuanQueen發表於2019-11-16
React

掛載階段

元件被建立，執行初始化，並被掛載到DOM中，完成元件的第一次渲染，依次呼叫的生命週期方法：

  1. constructor
  2. componentWillMount
  3. render
  4. componentDidMount
1.constructor

元件被建立時，首先呼叫元件的構造方法，接收一個props引數，props是從父元件中傳入的屬性物件，如果父元件中沒有沒有傳入屬性而元件自身定義了預設屬性那麼這個props指向的就是元件的預設屬性。呼叫super(props)才能保證props被傳入元件中。constructor通常用於初始化元件的state以及繫結事件處理方法等工作

2.componentWillMount

在元件被掛載到DOM前呼叫，且只會被呼叫一次。在實際專案中很少用到。呼叫this.setState不會引起元件的重新渲染

3.render

定義元件時唯一必要的方法根據元件的props和state返回一個React元素，用於描述元件的UI，通常React元素使用JSX語法定義。不能再render中呼叫this.setState，這會改變元件的狀態

4. componentDidMount

再元件被掛載到DOM後呼叫，且只會被呼叫一次。這時候已經可以獲取到DOM結構，因此依賴DOM節點的操作可以放到這個方法中。這個方法通常還會用於向伺服器請求資料。在這個方法中呼叫this.setState會引起元件的重新渲染

更新階段

  1. componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate
1.componentWillReceiveProps(nextProps)

這個方法旨在props引起的元件跟新過程中，才會被呼叫
引數nextProps是父元件傳遞給當前元件的新props
nextProps方法的值可能和子元件當前props的值相等，因此比較nextProps和this.props來決定是否執行props發生變化後的邏輯，比如根據新的props呼叫this.setState觸發元件的重新渲染

2.shouldComponentUpdate(nextProps,nextState)

這個方法決定元件是否繼續執行更新過程
透過比較nextProps,nextState和元件當前的props,state決定這個方法的返回結果

3.componentWillUpdate(nextProps,nextState)

這個方法在元件render呼叫前執行，一般很少用到

4.componentDidUpdate(prevProps,prevState)

元件更新後被呼叫，可以作為操作更新後的DOM的地方。引數prevProps,prevState代表元件更新前的props和state

解除安裝階段

  • componentWillUnmount
    這個方法在元件被解除安裝前呼叫，可以在這裡執行一些清理工作，比如清除元件中使用的定時器，清除componentDidMount中手動建立的DOM元素，避免引起記憶體洩漏

只有類元件才具有生命週期方法，函式元件是沒有生命週期方法的

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章