React新旧生命周期浅对比

最新推荐文章于 2024-09-25 10:46:15 发布

超级冲天猪

最新推荐文章于 2024-09-25 10:46:15 发布

阅读量181

点赞数 2

分类专栏： React.js 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_51207602/article/details/122740937

版权

本文探讨了React组件的新旧生命周期方法，详细介绍了挂载、更新和卸载阶段的变化，并通过实例展示了不同生命周期方法的执行顺序。在新生命周期中，getDerivedStateFromProps和getSnapshotBeforeUpdate等方法的引入，提供了更精细的控制组件更新的能力。

摘要由CSDN通过智能技术生成

React新旧生命周期

在具有许多组件的应用程序，当组件被销毁所释放所占用的资源是非常重要的，当Clock组件第一次被渲染到DOM中的时候，就为其设置一个定时器，这在React中被称为“挂载（mount）”。同时，当DOM中Clock组件被删除的时候，应该清除定时器。这在React被称为“卸载（unmount）”。我们可以为class组件声明一些特殊的方法，当组件挂载或卸载就会去执行这些方法。
挂载：mount
卸载：unmount

标题

在这里插入图片描述
看一段代码

	class Count extends React.Component{
   

			//构造器
			constructor(props){
   
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {
   count:0}
			}

			//加1按钮的回调
			add = ()=>{
   
				//获取原状态
				const {
   count} = this.state
				//更新状态
				this.setState({
   count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
   
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
   
				this.forceUpdate()
			}

			//组件将要挂载的钩子
			componentWillMount(){
   
				console.log('Count---componentWillMount');
			}

			//组件挂载完毕的钩子
			componentDidMount(){
   
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
   
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
   
				console.log('Count---shouldComponentUpdate'