React生命週期學習筆記

SBDavid發表於2018-09-02
React筆記

Github專案地址

React生命週期學習總結

1. constructor

1.1 作用

  • 初始化state
  • 繫結事件處理函式的this指向

1.2 props向state拷貝

constructor(props) {
    this.state = {
        aa: this.props.aa
    }
}
複製程式碼

在這種情況下props的變化不會引起stats的變化，容易引起bug。

2. getDerivedStateFromProps

2.1 作用

當state的值取決於props的變化時，可以使用這個鉤子

2.2 呼叫時機

state變化或者props變化

2.3 用法

這個鉤子返回新的state，或者null標識不更新state

2.4 注意

很多時候不需要手動監聽props變化，可以使用更簡單的做法完成相同的功能

2.5 擴充套件閱讀

you-probably-dont-need-derived-state

3. shouldComponentUpdate

3.1 作用

避免過度呼叫render函式。父元件的props發生變化會觸發所有子元件呼叫render函式。即使變化的props不影響該子元件，也會觸發子元件的render函式。

可以通過return false,避免觸發render函式

3.2 注意

如果返回false，那麼孩子節點也不會執行re-render。但是如果孩子節點的state發生變化，還是會觸發render

3.3 PureComponent

PureComponent的作用和shouldComponentUpdate相似。PureComponent和Conponent的區別是，前者提供了預設的shouldComponentUpdate鉤子，預設鉤子會對state和props的前後狀態做淺對比，如果前後狀態相同則不執行render函式。

大多數時候應該竟可能的使用PureComponnet，因為相比較shouldComponentUpdate而言前者不容易遺漏一些判斷，從而導致一些必要的渲染被遺漏。

4. render

4.1 作用

render函式返回React虛擬Dom結構，如果計算結果和之前的狀態對比沒有發生變化，則不需要改變頁面Dom結構

4.2 觸發時機

  • 元件首次載入
  • 頁面state或者props發生變化時
  • 父元件props發生變化，無論是否涉及該子元件，都出發render
  • shouldComponentUpdate返回false時，不會觸發render
  • 呼叫forceUpdate時，無論shouldComponentUpdate返回什麼，都出發render

4.3 注意

  • render函式不應該改變state
  • 不應該做網路請求
  • 不應該改變任何外部狀態
  • 不應該依賴其它全域性狀態
  • 相同的輸入有相同的輸出

5. getSnapshotBeforeUpdate

5.1 作用

在改變Dom結構之前儲存一些頁面狀態。

儲存的狀態可以在componentDidUpdate中得到

5.2 注意

不要在這個鉤子中使用setState，應為它發生在render函式之後。

6. componentDidMount

6.1 時機

Dom掛在完成之後觸發

6.2 注意

  • 如果在這個鉤子中呼叫setState，會觸發一次render函式。但是螢幕只會更新一次。但是這種操作可能引發效能問題。
  • 如果某個元件的渲染依賴於另一個元件的螢幕狀態（例如高度），那麼可以在這個鉤子中呼叫setState

6.3 未看懂的部分

This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount()

7. componentDidUpdate

7.1 時機

  • 發生在Dom渲染完成之後
  • 即使改變的props/state不改變頁面Dom結構，也會觸發這個鉤子

7.2 注意

在這個鉤子中使用setState，可能會觸發死迴圈和效能問題。而且對於使用者來說是不可見的

8. componentWillUnmount

8.1 作用

釋放資源和定時器

9. 其它方法

9.1 setState

  • setState可以傳入一個方法，用於讀取之前的state
  • 不能修改前值，需要返回一個新的物件
  • 新的狀態和之前的狀態會合並
  • 這裡的合併是淺合併
  • 如果傳入一個更新物件，react不保證state即使更新，因為react將多個setState做合併更新。這意味著一些中間狀態會被覆蓋。

升入閱讀

In depth: When and why are setState() calls batched? In depth: Why isn’t this.state updated immediately?

9.2 forceUpdate

  • 用於改變除了state/props之外的狀態
  • 會觸發render
  • 忽略shouldupdate
  • 觸發子節點更新

9.3 defaultProps

預設props

擴充套件閱讀 higher-order-components

相關文章