2024年前端最新React技术栈 --》组件生命周期和Vue拓展 ## Day6，最新2024年Web前端大厂面试经验

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

---

组件的生命周期是指组件从被创建到挂载到页面中运行起来，在到组件不用时卸载的过程。注意：只有类组件才有生命周期 (类组件 实例化；函数组件 不需要实例化)

Mounting(挂载)：已插入真实 DOM

Updating(更新)：正在被重新渲染

Unmounting(卸载)：已移出真实 DOM

挂载阶段

---

举个例子，我们依次在控制台输出三个过程，查看是否与我们输出的循序一致

import React from "react";



class App extends React.Component{

    constructor(){

        super()

        console.log('constructor');

    }

    componentDidMount(){

        console.log('componentDidMount');

    }

    render(){

        console.log('render');

        return <div>

            this is div

        </div>

    }

}

export default App

//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



import App from '@/App.js'



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    <App></App>

</div>,document.getElementById('app'))

render和componentDidMount循序颠倒，说明我们不要以输出的循序为主，而是以它真正执行的顺序为主。

钩子函数 constructor

触发时机：创建组件时，最先执行，初始化的时候只执行一次。

作用：1.初始化state 、2.创建Ref、3.使用bind解决this指向问题

之前我们初始化state的时候会在构造器内书写，现在React也允许我们直接在外边书写

钩子函数 render

触发时机：每次组件渲染都会触发

作用：渲染UI (注意：不能在里面调用setState)

每次只要引起视图变化，我们的render都会执行。

钩子函数 componentDidMount

触发时机：组件挂载 (完成DOM渲染) 后执行，初始化的时候执行一次

作用：1.发送网络请求、2.DOM操作

更新阶段

---

render和componentDidMount每次更新都会依次执行

钩子函数 render

触发时机：每次组件渲染都会触发

作用：渲染UI (与 挂载阶段 是同一个render)

钩子函数 componentDidUpdate

触发时机：组件更新后 (DOM渲染完毕)

作用：DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

卸载阶段

---

钩子函数 componentWillUnmount

触发时机：组件卸载 (从页面中消失)

作用：执行清理工作 (比如：清理定时器等)

import React from "react";



class Test extends React.Component{

    componentWillUnmount(){

        console.log('componentWillUnmount');

        //清理定时器

    }

    render(){

        return <div>

            test

        </div>

    }

}



class App extends React.Component{

    constructor(){

        super()

        // this.state = {



        // }



    }

    state = {

        count:0,

        flag:true

    }

    clickHandler = () =>{

        this.setState({

            count: this.state.count+1,

            flag: !this.state.flag

        })

    }



    componentDidMount(){

        console.log('componentDidMount');

        //Ajax 类似于 mounted

    }

    componentDidUpdate(){

        console.log('componentDidUpdate');

    }

    render(){

        console.log('render');

        return <div>

            this is div

            {/* 通过一个数据状态的切换 让Test组件进行销毁重建 就会发生组件卸载 */}

            {this.state.flag ? <Test /> : null}

            <button onClick={this.clickHandler}>{this.state.count}</button>

        </div>

    }

}

export default App

import React from "react";



class Test extends React.Component{

    //如果数据是组件的状态需要去影响视图 定义到state中

    //如果我们需要的数据状态 不和视图绑定 定义成一个普通的实例属性就可以了

    //state中尽量保持精简

    timer = null

    componentDidMount(){

        this.timer = setInterval(()=>{

            console.log('定时器开启');

        },1000)

    }



    componentWillUnmount(){

        console.log('componentWillUnmount');

        clearInterval(this.timer)

    }

    render(){

        return <div>

            test

        </div>



### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>![](https://img-blog.csdnimg.cn/img_convert/7de36e13795f2302e39d47d884c1344a.webp?x-oss-process=image/format,png)

og('定时器开启');

        },1000)

    }



    componentWillUnmount(){

        console.log('componentWillUnmount');

        clearInterval(this.timer)

    }

    render(){

        return <div>

            test

        </div>



### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>[外链图片转存中...(img-YMEKo1ml-1715585647910)]