2022年前端React的100道面試題的第8題：getDerivedStateFromProps方法
問題
關於 static getDerivedStateFromProps 方法的理解正確的有哪些？
選項
A 會在呼叫 render 方法之後呼叫，並且在初始掛載及後續更新時都會被呼叫。
B 它應返回一個物件來更新 state，如果返回 null 則不更新任何內容。
C 存在只有一個目的：讓元件在 props 變化時更新 state。
D 是在16.4 版本新增的，用於替代 shouldComponentUpdate 生命週期。
答案
B、C
糾錯：
A 會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。
D 此生命週期是在 16.3 版本新增的，用於替代 componentWillReceiveProps
（16.4 的優化後，便與 UNSAFE_componentWillReceiveProps 的執行時機不同，後者僅在父元件重新渲染時觸發，而不是在內部呼叫 setState 時。）
解答
此方法無權訪問元件例項。
static getDerivedStateFromProps 生命週期是接受 props 和 state 引數的純函式。
它的執行順序
-
constructor()
-
static getDerivedStateFromProps()
-
render()
-
componentDidMount()
觸發此生命週期的時機
-
state 修改時觸發的渲染時；
-
props 修改時觸發的渲染時；
-
父元件重新渲染時；
此生命週期和 shouldComponentUpdate(props, state) 的區別
前置控制 state 的修改，後置控制 render 是否允許被執行。
此生命週期和 UNSAFE_componentWillReceiveProps(nextProps: any): void 的區別
在 static getDerivedStateFromProps() 後，UNSAFE_componentWillReceiveProps
作用 state 的方式
如果不做任何返回，或者返回空物件，都不會對 state 有任何影響。因為它返回的是一個乾淨的物件，會 merge 到 state 物件上作為最新的資料狀態值。從 TS 函式定義檢查考慮，如果有邏輯中的 return，建議在函式最後提供一個預設返回值 return null。
使用方式
當判斷 props 是否發生修改時，需要先儲存 props 的值，然後對比上次和本次的 props 是否有差異，如果有差異才重新渲染此元件。
class EmailInput extends Component {
state = {
email: this.props.email,
preEmail: this.props.email,
};
static getDerivedStateFromProps(props, state) {
if (props.email !== state.preEmail) {
return { email: props.email, preEmail: props.email };
}
return null
}
render() {
return <input onChange={this.handleChange} value={this.state.email} />;
}
handleChange = event => {
this.setState({ email: event.target.value });
};
}
官方提醒
舊的 componentWillReceiveProps 和新的 getDerivedStateFromProps 方法都會給元件增加明顯的複雜性。為了比對 props 的變化，往往需要用 props 中的屬性作為 state 作為初始化，因為上面的觸發時機，會導致覆蓋元件內部在 state 的值。這樣做會導致 state 後沒有正確渲染。
資料
來源