react 16.3+ 新生命周期

react 16.3版本出現了兩個新的生命周期函數，並將逐漸廢棄componentWillMount()、componentWillReceiveProps()、componentWillUpdate()

 

 

1、static getDerivedStateFromProps(props, state)

注意：

　　最常見的誤解就是 getDerivedStateFromProps 和 componentWillReceiveProps 只會在 props “改變”時才會調用。實際上只要父級重新渲染時，這兩個生命周期函數就會重新調用，不管 props 有沒有“變化”。

getDerivedStateFromProps 的存在只有一個目的：讓組件在 props 變化時更新 state

名詞“受控”和“非受控”通常用來指代表單的 inputs，但是也可以用來描述數據頻繁更新的組件。用 props 傳入數據的話，組件可以被認為是受控（因為組件被父級傳入的 props 控制）。數據只保存在組件內部的 state 的話，是非受控組件（因為外部沒辦法直接控制 state）

設計組件時，重要的是確定組件是受控組件還是非受控組件。在實際應用中，組件一般都會有受控組件和非受控組件。

任何數據，都要保證只有一個數據來源（明確的數據來源），而且避免直接復制它

constructor(props) { super(props); // 不要這樣做 this.state = { color: props.color }; }
這種情況可能會造成數據來源不只一個（如果使用也setState更新color的話），並且可能會造成父組件props.color改變子組件state里的color並沒有改變。解決方法是：（1）完全做成受控組件，不用state，由props進行控制（2）只有在你刻意忽略props更新的時候使用，應將 props.color 重命名為 props.initialColor 或 props.defaultColor非受控組件，后續更新完全由setState控制

不要直接復制（mirror） props 的值到 state 中，而是去實現一個受控的組件，然后在父組件里合並兩個值。比如，不要在子組件里被動的接受 props.value 並跟蹤一個臨時的 state.value，而要在父組件里管理 state.draftValue 和 state.committedValue，直接控制子組件里的值。這樣數據才更加明確可預測。

對於不受控的組件，當你想在 prop 變化（通常是 ID ）時重置 state 的話，可以選擇一下幾種方式：

• 建議: 重置內部所有的初始 state，使用 key 屬性（當 key 變化時， React 會創建一個新的而不是更新一個既有的組件）
• 選項一：僅更改某些字段，觀察特殊屬性的變化（比如 props.userID）。
• 選項二：使用 ref 調用實例方法

派生狀態會導致代碼冗余，並使組件難以維護。 確保你已熟悉這些簡單的替代方案：

• 如果你需要執行副作用（例如，數據提取或動畫）以響應 props 中的更改，請改用 componentDidUpdate。

• 如果只想在 prop 更改時重新計算某些數據，請使用 memoization helper 代替。

• 如果你想在 prop 更改時“重置”某些 state，請考慮使組件完全受控或使用 key 使組件完全不受控 代替。

 

2、getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節點）之前調用。它使得組件能在發生更改之前從 DOM 中捕獲一些信息（例如，滾動位置）。此生命周期的任何返回值將作為參數傳遞給 componentDidUpdate()

此用法並不常見，但它可能出現在 UI 處理中，如需要以特殊方式處理滾動位置的聊天線程等