React的生命周期
⽣命周期⽅法，用于在组件不同阶段执行⾃定义功能。在组件被创建并插⼊到 DOM 时(即挂载中阶段 (mounting))，组件更新时，组件取消挂载或从 DOM 中删除时，都有可以使用的生命周期方法。
一、React V16.3之前的⽣命周期
二、React V17之后的⽣命周期
V17可能会废弃的三个生命周期函数用getDerivedStateFromProps替代，⽬前使⽤的话加上
UNSAFE_:
componentWillMount
componentWillReceiveProps
componentWillUpdate
引入两个新的⽣命周期函数:
static getDerivedStateFromProps
getSnapshotBeforeUpdate
如果不想⼿动给将要废弃的⽣命周期添加 UNSAFE_ 前缀，可以⽤下⾯的命令 ：
npx react-codemod rename-unsafe-lifecycles <path>
新引⼊的两个生命周期函数
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 会在调⽤ render ⽅法之前调⽤，并且在初始挂载及后续更新时都会被
调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
请注意，不管原因是什么，都会在每次渲染前触发此方法。这与 UNSAFE_componentWillReceiveProps 形成对比，后者仅在父组件重新渲染时触发，⽽不是在内部调⽤ setState 时。
import React, { Component } from "react";
import PropTypes from "prop-types";
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");
}
static getDerivedStateFromProps(props, state) {
// getDerivedStateFromProps 会在调用 render 方法之前调⽤
// 并且在初始挂载及后续更新时都会被调⽤
// 它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
console.log("getDerivedStateFromProps");
return count > 1 ? { count: 0 } : null;
}
// componentWillMount() { // v17废弃
// console.log("componentWillMount");
// }
componentDidMount() {
console.log("componentDidMount");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextState, this.state);
return true;
}
// componentWillUpdate() { // v17废弃
// console.log("componentWillUpdate");
// }
componentDidUpdate() {
console.log("componentDidUpdate");
}
setCount = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
console.log("render");
const { count } = this.state;
return (
<div>
<h3>LifeCyclePage</h3>
<p>{count}</p>
<button onClick={this.setCount}>改变count</button>
<Child count={count}/>
</div>
)
}
}
class Child extends Component {
// 初次渲染的时候不会执行，只有在已挂载的组件接收新的props的时候，才会执行
// componentWillReceiveProps(nextProps) { // v17废弃
// console.log("componentWillReceiveProps", nextProps);
// }
componentWillUnmount() {
console.log("componentWillUnmount");
}
render() {
console.log("Child render");
const { count } = this.props;
return (
<div>
<h3>Child</h3>
<p>{count}</p>
</div>
)
}
}
步骤1：首次进入页面的打印执行顺序为
1.constructor
2.getDerivedStateFromProps
3.render
4.Child render
5.componentDidMount
步骤2：点击按钮后的打印执行顺序为
1.getDerivedStateFromProps
2.shouldComponentUpdate {count:1} {count:0}
3.render
4.Child render
5.componentDidUpdate
再此点击按钮后的打印执行顺序为
1.getDerivedStateFromProps
2.shouldComponentUpdate {count:0} {count:1}
3.render
4.Child render
5.componentDidUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
在render之后，在componentDidUpdate之前。
getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如，滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate(prevProps, prevState, snapshot) 。
import React, { Component } from "react";
import PropTypes from "prop-types";
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");
}
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps");
return null;
}
// componentWillMount() { // v17废弃
// console.log("componentWillMount");
// }
componentDidMount() {
console.log("componentDidMount");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextState, this.state);
return true;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 在render之后，在componentDidUpdate之前
console.log("getSnapshotBeforeUpdate", prevProps, prevState);
return {
content: "我是getSnapshotBeforeUpdate"
};
}
// componentWillUpdate() { // v17废弃
// console.log("componentWillUpdate");
// }
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate", prevProps, prevState, snapshot);
}
setCount = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
console.log("render");
const { count } = this.state;
return (
<div>
<h3>LifeCyclePage</h3>
<p>{count}</p>
<button onClick={this.setCount}>改变count</button>
<Child count={count}/>
</div>
)
}
}
class Child extends Component {
// 初次渲染的时候不会执行，只有在已挂载的组件接收新的props的时候，才会执行
// componentWillReceiveProps(nextProps) { // v17废弃
// console.log("componentWillReceiveProps", nextProps);
// }
componentWillUnmount() {
console.log("componentWillUnmount");
}
render() {
console.log("Child render");
const { count } = this.props;
return (
<div>
<h3>Child</h3>
<p>{count}</p>
</div>
)
}
}
步骤1：首次进入页面的打印执行顺序为
1.constructor
2.getDerivedStateFromProps
3.render
4.Child render
5.componentDidMount
步骤2：点击按钮后的打印执行顺序为
1.getDerivedStateFromProps
2.shouldComponentUpdate {count:1} {count:0}
3.render
4.Child render
5.getSnapshotBeforeUpdate {msg: "omg"} {count: 0}
6.componentDidUpdate {msg: "omg"} {count: 0} {content: "我是getSnapshotBeforeUpdate"}
