面试官常问React的生命周期问题

在react面试中，面试官经常会问我们一些关于react的生命周期问题，今天特此分享本文给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧

React的生命周期

两张图带你理解 React的生命周期

React的生命周期（旧）

在这里插入图片描述

 class Life extends React.Component{ // 构造器 constructor(props){ console.log('Life构造器---constructor'); super(props) this.state={num:0} } // 计算+1功能 add=()=>{ const {num} = this.state this.setState({num:num+1}) } // 删除组件 death=()=>{ ReactDOM.unmountComponentAtNode(document.getElementById('text')) } force=()=>{ this.forceUpdate() } // 将要挂载 componentWillMount(){ console.log('Life将要挂载---componentWillMount'); } // 已经挂载 componentDidMount(){ console.log('Life已经挂载---componentDidMount'); } // 删除触发 componentWillUnmount(){ console.log('Life删除触发---componentWillUnmount'); } // 是否应该改变数据 shouldComponentUpdate(){ console.log('Life是否改变数据---shouldComponentUpdate'); return true } // 将要改变数据 componentWillUpdate(){ console.log('Life将要改变数据---componentWillUpdate'); } // 改变数据 componentDidUpdate(){ console.log('Life改变数据---componentDidUpdate'); } render(){ console.log('Life---render'); const {num} = this.state return(  计数器：{num}
 ) } } // 渲染页面 ReactDOM.render(, document.getElementById('text'))

挂载步骤

在这里插入图片描述

更新步骤

在这里插入图片描述

删除

在这里插入图片描述

总结：初始化阶段: 由ReactDOM.render()触发―初次渲染
1. constructor() ---构造器
2. componentWillMount() ---将要挂载
3. render() ---render
4. componentDidMount() ---挂载时更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. shouldComponentUpdate() ---是否要进行更改数据
2. componentWillUpdate() ---将要更新数据
3. render()
4. componentDidUpdate() ---更新数据卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() ---卸载

React的生命周期（新）

请添加图片描述

生命周期的三个阶段（新）

初始化阶段: 由ReactDOM.render()触发―初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()