?生命周期?方法，?用于在组件不不同阶段执?行行?自定义功能。在组件被创建并插?入到 DOM 时（即挂载中阶段（mounting） ），组件更更新时，组件取消挂载或从 DOM 中删除时，都有可以使?用的?生命周期?方法。
V17可能会废弃的三个?生命周期函数?用getDerivedStateFromProps替代，?目前使?用的话加上 UNSAFE_： componentWillMount componentWillReceiveProps componentWillUpdate 引?入两个新的?生命周期函数： static getDerivedStateFromProps getSnapshotBeforeUpdate
如果不不想?手动给将要废弃的?生命周期添加 UNSAFE_ 前缀，可以?用下?面的命令。
npx react-codemod rename-unsafe-lifecycles <path>
getDerivedStateFromProps
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 会在调?用 render ?方法之前调?用，并且在初始挂载及后续更更新时都会被 调?用。它应返回?一个对象来更更新 state，如果返回 null 则不不更更新任何内容。
请注意，不不管原因是什什么，都会在每次渲染前触发此?方法。这与 UNSAFE_componentWillReceiveProps 形成对?比，后者仅在?父组件重新渲染时触发，?而不不是在内部 调?用 setState 时。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
在render之后，在componentDidUpdate之前。 getSnapshotBeforeUpdate() 在最近?一次渲染输出（提交到 DOM 节点）之前调?用。它使得组件能 在发?生更更改之前从 DOM 中捕获?一些信息（例例如，滚动位置）。此?生命周期的任何返回值将作为参数传 递给 componentDidUpdate(prevProps, prevState, snapshot) 。
范例例：创建LifeCyclePage.js
import React, { Component } from "react";
import PropTypes from "prop-types";
/*
V17可能会废弃的三个?生命周期函数?用getDerivedStateFromProps替代，?目前使?用的话加上
UNSAFE_：
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
*/
export default class LifeCyclePage extends Component {
static defaultProps = {
msg: "omg"
};
static propTypes = {
msg: PropTypes.string.isRequired
};
constructor(props) {
super(props);
this.state = {
count: 0,
};
console.log("constructor", this.state.count);
}
static getDerivedStateFromProps(props, state) {
// getDerivedStateFromProps 会在调?用 render ?方法之前调?用，
//并且在初始挂载及后续更更新时都会被调?用。
//它应返回?一个对象来更更新 state，如果返回 null 则不不更更新任何内容。
const { count } = state;
console.log("getDerivedStateFromProps", count);
return count < 5 ? null : { count: 0 };
}
//在render之后，在componentDidUpdate之前。
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) {
const { count } = prevState;
console.log("getSnapshotBeforeUpdate", count);
return null;
}
/* UNSAFE_componentWillMount() {
//不不推荐，将会被废弃
console.log("componentWillMount", this.state.count);
} */
componentDidMount() {
console.log("componentDidMount", this.state.count);
}
componentWillUnmount() {
//组件卸载之前
console.log("componentWillUnmount", this.state.count);
}
/* UNSAFE_componentWillUpdate() {
//不不推荐，将会被废弃
console.log("componentWillUpdate", this.state.count);
} */
componentDidUpdate() {
console.log("componentDidUpdate", this.state.count);
}
shouldComponentUpdate(nextProps, nextState) {
const { count } = nextState;
console.log("shouldComponentUpdate", count, nextState.count);
return count !== 3;
}
setCount = () => {
this.setState({
count: this.state.count + 1,
});
};
render() {
const { count } = this.state;
console.log("render", this.state);