组件的挂载Mounting阶段:
componentWillMount(): 组件将要挂载渲染，在这个生命周期中可以请求服务端数据，最早可以访问可以修改state数据的生命周期，所有建议把异步请求写到这里。可以修改props,state,无法获取ref的DOM,作用： 发异步请求更新state。render()：组件开始渲染，在这个生命周期中写渲染的DOM。作用： 渲染React组件元素，无法获取ref的DOM，只要是setState，render函数就会重新调用。componentDidMount(): 该方法在将组件渲染结束并挂载到DOM树，呈现给DOM后运行。如果想要在Mounting阶段操作DOM则只能在该生命周期中，同时props,state也可以访问。
组件的更新Updating阶段:
componentWillReceiveProps(): 组件将要接受props数据。shouldComponentUpdate(): 组件需要更新，可以加入自定义业务，根据条件选择是否更新，返回true继续更新该组件，返回false停止更新组件。componentWillUpdate(): 组件将要更新。render(): 每次更新组件都会重新调用render()
方法。componentDidUpdate(): 组件已完成更新，这个时候拿到的DOM是最新的。
组件的卸载Unmounting阶段：
componentWillUnmount(): 组件卸载时调用，可以做一些额外处理操作，例如清楚定时器(因为在组件卸载的时候，里面定义的定时器还存在，所以需要在这个生命周期中给手动清除)
Error Handling:
componentDidCatch(): 子组件发生异常调用，可以加入一些异常处理业务：例如组件发生异常的时候，为用户发出提示，注意：必须在父组件中使用。
到React v16.3，生命周期函数发生了大改动，引入了两个新的生命周期函数。
新引入的两个新的生命周期函数： getDerivedStateFromProps，getSnapshotBeforeUpdate
getDerivedStateFromProps：
getDerivedStateFromProps本来是只在创建和更新（由父组件引发部分），也就是不是不由父组件引发，那么getDerivedStateFromProps也不会被调用，如自身setState引发或者forceUpdate引发。后来也改正了这一点，让getDerivedStateFromProps无论是Mounting还是Updating，也无论是因为什么引起的Updating，全部都会被调用。getSnapshotBeforeUpdate:
getSnapshotBeforeUpdate()被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
举例：
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
如果这篇文章对你有帮助，不要忘了点个赞哟，ღ( ´･ᴗ･` )比心
