React生命周期
getDerivedStateFromProps 用于替換 componentWillReceiveProps 呵扛，該函數(shù)會在初始化和 update 時被調(diào)用尚骄。
getSnapshotBeforeUpdate 用于替換 componentWillUpdate 柏靶，該函數(shù)會在 update 后 DOM 更新前被調(diào)用告私，用于讀取最新的 DOM 數(shù)據(jù)馁龟。
V16 生命周期函數(shù)用法建議
class ExampleComponent extends React.Component {
// 用于初始化 state
constructor() {}
// 用于替換 `componentWillReceiveProps` 蹋盆，該函數(shù)會在初始化和 `update` 時被調(diào)用
// 因為該函數(shù)是靜態(tài)函數(shù)俭令，所以取不到 `this`
// 如果需要對比 `prevProps` 需要單獨在 `state` 中維護(hù)
static getDerivedStateFromProps(nextProps, prevState) {}
// 判斷是否需要更新組件后德，多用于組件性能優(yōu)化
shouldComponentUpdate(nextProps, nextState) {}
// 組件掛載后調(diào)用
// 可以在該函數(shù)中進(jìn)行請求或者訂閱
componentDidMount() {}
// 用于獲得最新的 DOM 數(shù)據(jù)
getSnapshotBeforeUpdate() {}
// 組件即將銷毀
// 可以在此處移除訂閱，定時器等等
componentWillUnmount() {}
// 組件銷毀后調(diào)用
componentDidUnMount() {}
// 組件更新后調(diào)用
componentDidUpdate() {}
// 渲染組件函數(shù)
render() {}
// 以下函數(shù)不建議使用
UNSAFE_componentWillMount() {}
UNSAFE_componentWillUpdate(nextProps, nextState) {}
UNSAFE_componentWillReceiveProps(nextProps) {}
}
Vue生命周期
image
