react生命周期

⽣命周期⽅法，⽤于在组件不同阶段执⾏⾃定义功能。在组件被创建并插⼊到 DOM 时（即挂载中阶段（mounting）），组件更新时，组件取消挂载或从 DOM 中删除时，都有可以使⽤的⽣命周期⽅法。

React V16.3之前的⽣命周期

componentWillMount 组件将要挂载，不能进行dom操作，在渲染前调用,在客户端也在服务端。

componentDidMount : 组件已经挂载，能进行dom操作。在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。
如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,
setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 父组件传递的属性有变化，做相应响应
(更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 组件是否需要更新
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate 组件将要更新 ，在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 组件完成更新。在初始化时不会被调用。
componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。

V16.4之后的⽣命周期：

V17可能会废弃的三个⽣命周期函数⽤getDerivedStateFromProps替代，⽬前使⽤的话加上
UNSAFE_：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate
  引⼊两个新的⽣命周期函数：
• static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调⽤ render ⽅法之前调⽤，并且在初始挂载及后续更新时都会被
调⽤。它应返回⼀个对象来更新 state，如果返回 null 则不更新任何内容。
请注意，不管原因是什么，都会在每次渲染前触发此⽅法。这与
UNSAFE_componentWillReceiveProps 形成对⽐，后者仅在⽗组件重新渲染时触发，⽽不是在内部
调⽤ setState 时。

• getSnapshotBeforeUpdate(prevProps, prevState)

在render之后，在componentDidUpdate之前。
getSnapshotBeforeUpdate() 在最近⼀次渲染输出（提交到 DOM 节点）之前调⽤。它使得组件能
在发⽣更改之前从 DOM 中捕获⼀些信息（例如，滚动位置）。此⽣命周期的任何返回值将作为参数传
递给 componentDidUpdate(prevProps, prevState, snapshot) 。

如果不想⼿动给将要废弃的⽣命周期添加 UNSAFE_ 前缀，可以⽤下⾯的命令。

npx react-codemod rename-unsafe-lifecycles <path>

验证⽣命周期

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 ⽅法之前调⽤，
//并且在初始挂载及后续更新时都会被调⽤。
开课吧web全栈架构师
//它应返回⼀个对象来更新 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);
return (
<div> <h1>我是LifeCycle⻚⾯</h1> <p>{count}</p>
开课吧web全栈架构师
<button onClick={this.setCount}>改变count</button>
 {/* {!!(count % 2) && <Foo />} */} <Child count={count} />
</div>
 );
 }
}
class Child extends Component {
UNSAFE_componentWillReceiveProps(nextProps) {
//不推荐，将会被废弃
// UNSAFE_componentWillReceiveProps() 会在已挂载的组件接收新的 props 之前被调⽤
console.log("Foo componentWillReceiveProps");
 }
componentWillUnmount() {
//组件卸载之前
console.log(" Foo componentWillUnmount");
 }
render() {
return (
<div
style={{ border: "solid 1px black", margin: "10px", padding: "10px" }}
>
我是Foo组件
<div>Foo count: {this.props.count}</div>
</div>
 );
 }
}