目录

一、数据加载时

二、数据更新时

三、组件销毁

一、数据加载时

constructor-->componentWilMount-->render-->componentDidMount

注:在版本16.4之后,废除了componentWillMount,则顺序如下:

constructor()-->static getDerivedStateFromProps()-->render()-->componentDidMount()

import React, { Component } from &＃39;react&＃39;export default class Lifecycle extends Component {constructor(props){super(props);console.log(&＃39;01 构造函数&＃39;);}//组件将要被挂载componentWillMount(){console.log(&＃39;02 组件挂载前触发&＃39;);}//组件挂载完成componentDidMount(){console.log(&＃39;04 组件挂载完成&＃39;);}render() {console.log(&＃39;03 数据渲染&＃39;);return (

React 声明周期函数

)}
}

getDerivedStateFromProps

一个静态方法&＃xff0c;所以不能在这个函数里面使用this&＃xff0c;这个函数有两个参数props和state&＃xff0c;分别指接收到的新参数和当前的state对象&＃xff0c;这个函数会返回一个对象用来更新当前的state对象&＃xff0c;如果不需要更新可以返回null

场景: 当我们接收到新的属性想去修改我们state&＃xff0c;可以使用getDerivedStateFromProps

class ExampleComponent extends React.Component {// Initialize state in constructor,// Or with a property initializer.state &＃61; {};static getDerivedStateFromProps(nextProps, prevState) {if (prevState.someMirroredValue !&＃61;&＃61; nextProps.someValue) {return {derivedData: computeDerivedState(nextProps),someMirroredValue: nextProps.someValue};}// Return null to indicate no change to state.return null;}
}

二、数据更新时

shouldComponentUpdate -->componentWillUpdate--->render -->componentDidUpdate

版本更新后顺序:

static getDerivedStateFromProps()-->static shouldComponentUpdate()-->render()-->static getSnapshotBeforeUpdate()-->componentDidUpdate()

import React, { Component } from &＃39;react&＃39;export default class Lifecycle extends Component {constructor(props){super(props);this.state&＃61;{title:&＃39;&＃39;}console.log(&＃39;01 构造函数&＃39;);}shouldComponentUpdate &＃61; (nextProps, nextState) &＃61;> {console.log(&＃39;更新的数据&＃39;,nextState);console.log(&＃39;01 数据是否要更新&＃39;);return true;}//组件更新前componentWillUpdate(){console.log(&＃39;02 数据将要更新&＃39;);}//组件更新完成componentDidUpdate(){console.log(&＃39;04 数据更新完毕&＃39;);}updata&＃61;()&＃61;>{this.setState({title:&＃39;update 完成&＃39;})}render() {console.log(&＃39;03 数据渲染&＃39;);return (

React 声明周期函数

更新数据

)}
}


getSnapshotBeforeUpdate

有两个参数prevProps和prevState,表示之前的属性和之前的state,这个函数一定有一个返回值&＃xff0c;会作为第三个参数传递给componentDidUpdate,如果不想返回值&＃xff0c;则返回null。该方法一定要和componentDidupdate一起使用&＃xff0c;否则控制台会有警告

三、组件销毁

//子组件中 componentWillUnmount(){console.log(&＃39;组件销毁前触发&＃39;);}//父组件中
import React, { Component } from &＃39;react&＃39;;
import Lifecycle from &＃39;./components/Lifecycle&＃39;
class App extends Component {constructor(props){super(props);this.state&＃61;{flag:true}}destroy&＃61;()&＃61;>{this.setState({flag:!this.state.flag})}render() {return (

{this.state.flag?:&＃39;&＃39;}组件创建与销毁

);}
}
错误处理

当渲染过程过&＃xff0c;生命周期或子组件的构造函数中抛出错误时&＃xff0c;会调用如下方法:

static getDerivedStateFromError()

componentDidCatch()

总结

1.  在 v16版本后 引入了 Fiber机制&＃xff0c;Fiber将原先的同步渲染改为异步渲染

2. 由于原先有些生命周期可能会被打断&＃xff0c;所以可能会出现多次调用的情况&＃xff0c;因此替换方案如下:

        2.1 geDerivedStateFromProps 替换 componentWillReciveProps

        2.2 getSnapshotBeforeUpdate 替换 componentWillUpdate