React的生命周期函数详解

}

componentDidUpdate()

该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作

componentDidUpdate(){

console.log(“sonApp.js第五步：组件更新完成”)

}

整体代码组成更新阶段

import React,{Component} from “react”;

import SonApp from ‘./sonApp’

class App extends Component{

state={

hobby:‘爱吃很多好吃的’

}

// 是否要更新数据，这里返回true才会更新数据

shouldComponentUpdate(nextProps,nextState){

console.log(“app.js第一步：这里判断是否要更新数据”)

console.log(nextProps) // 父组件传给子组件的值，这里没有会显示空

console.log(nextState) // 数据更新后的值

return true // 返回true，确认更新

}

// 更新数据时触发的生命周期函数

componentDidUpdate(){

console.log(“app.js第四步：组件更新完成”)

}

// 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，不过还有修改文档，你可以在这里去获取更新之前的文档

getSnapshotBeforeUpdate(){

console.log(“app.js第四步：完成渲染即将被挂载在DOM中”)

return 11

}

setData = ()=>{

this.setState({hobby:“你是猪吗？？？”})

}

render(){

console.log(“app.js第三步：数据渲染render”)

return (

{this.state.hobby}

点击更新数据

)

};

}

export default App;

浏览器反馈

2. 挂载阶段

---

constructor(props)

类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

• 初始化 state

• 处理事件绑定函数的 this(之前有过一篇React踩坑系列，其中的this指向就有用的这里去处理)

constructor(props){

super(props)

console.log(“第一步：构造函数”)

}

render

组件生命周期渲染阶段执行的函数

render(){

console.log(“第三步：渲染render”)

return (

我喜欢吃各种口味的广式月饼，除了水果味的！！！

)

};

static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

static getDerivedStateFromProps(props, state){

console.log(props); // 接收到父组件传递过来的新的props

console.log(state); // 组件当前的数据

console.log(“第二步：组件将要挂载”);

return state; // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.

}

componentDidMount()

在组件挂载后调用

componentDidMount(){

console.log(“第四步：组件挂载完成”)

}

整体代码组成组件加载阶段

import React,{Component} from “react”;

class App extends Component{

constructor(props){

super(props)

console.log(“第一步：构造函数”)

}

state={

hobby:‘爱吃很多好吃的’

}

/**

• 每次组件渲染前被调用,该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，

• 它的存在只有一个目的：让组件在 props 变化时更新 state

• */

static getDerivedStateFromProps(props, state){

console.log(props); // 接收到父组件传递过来的新的props

console.log(state); // 组件当前的数据

console.log(“第二步：组件将要挂载”);

return state; // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.

}

// 组件挂在完成时触发的生命周期函数

componentDidMount(){

console.log(“第四步：组件挂载完成”)

}

render(){

console.log(“第三步：渲染render”)

return (

我喜欢吃各种口味的广式月饼，除了水果味的！！！

)

};

}

export default App;

浏览器反馈

3. 销毁阶段

---

componentWillUnmount()

该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

componentWillUnmount(){

console.log(“sonApp.js组件被销毁”)

}

完整版销毁组件代码

父组件

import React,{Component} from “react”;

import SonApp from ‘./sonApp’
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取

[外链图片转存中…(img-tyN3GHvs-1712952396719)]

[外链图片转存中…(img-b5VDn9lZ-1712952396719)]

[外链图片转存中…(img-8ahebObP-1712952396719)]