-
生命周期
生命周期方法
⽣生命周期⽅方法，⽤用于在组件不不同阶段执⾏行行⾃自定义功能。在组件被创建并插⼊入到 DOM 时（即挂载中阶段（mounting） ），组件更更新时，组件取消挂载或从 DOM 中删除时，都有可以使⽤用的⽣生命周期⽅方法。
React V16.3之前的生命周期
V16.4之后的⽣生命周期：
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",