React的生命周期函数详解(1)，web开发环境搭建

// 是否要更新数据，这里返回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’

class App extends Component{

state={

hobby:true

}

setData = ()=>{

this.setState({hobby:!this.state.hobby})

}

render(){

return (

点击挂载或销毁组件

{

this.state.hobby ? : null

}

)

};

}

export default App;

子组件
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

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

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

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

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

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

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

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

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

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

[外链图片转存中…(img-fD1cdAUh-1712201682006)]