【React】组件的生命周期 - 虚拟DOM - DOM Diffing算法

最新推荐文章于 2024-04-07 15:03:38 发布

YK菌

最新推荐文章于 2024-04-07 15:03:38 发布

阅读量3.2k

点赞数 1

分类专栏：前端框架React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_44972008/article/details/117606346

版权

本文详细探讨了React组件的生命周期，包括新旧生命周期阶段，重点讲解了初始化、更新和卸载阶段的关键钩子函数。同时，介绍了虚拟DOM和DOM Diffing算法的基本原理，强调了key在优化更新过程中的重要作用，并给出了使用key的注意事项和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 组件的生命周期

1.1 理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

1.2 引入案例

需求:定义组件实现以下功能：

让指定的文本做显示 / 隐藏的渐变动画
从完全可见，到彻底消失，耗时2S
点击“不活了”按钮从界面中卸载组件

//创建组件
//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
class Life extends React.Component{
   

  state = {
   opacity:1}

  death = ()=>{
   
	//卸载组件
	ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  }

  //组件挂完毕
  componentDidMount(){
   
	console.log('componentDidMount');
	this.timer = setInterval(() => {
   
	  //获取原状态
	  let {
   opacity} = this.state
	  //减小0.1
	  opacity -= 0.1
	  if(opacity <= 0) opacity = 1
	  //设置新的透明度
	  this.setState({
   opacity})
	}, 200)

最低0.47元/天解锁文章