React技术栈 --》组件生命周期和Vue拓展 ## Day6

最新推荐文章于 2024-10-14 12:37:39 发布

2401_84411822

最新推荐文章于 2024-10-14 12:37:39 发布

阅读量388

点赞数 5

分类专栏：程序员文章标签： react.js vue.js 前端

本文链接：https://blog.csdn.net/2401_84411822/article/details/138296537

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

//1.导入包

import React from ‘react’

import ReactDOM from ‘react-dom’

import App from ‘@/App.js’

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

ReactDOM.render(

<App></App>

,document.getElementById('app'))




![](https://img-blog.csdnimg.cn/8b2241a3f24e457e823e9af95f08eba4.png)



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



### 钩子函数 constructor



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



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



![](https://img-blog.csdnimg.cn/17ddd8afaebd4eb2a959d7dd670177c2.png)



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



### 钩子函数 render



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



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



![](https://img-blog.csdnimg.cn/1cedfbae0dd54482bc19b1a8645e6ad9.png)



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



### 钩子函数 componentDidMount



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



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



![](https://img-blog.csdnimg.cn/6570e0b0f9334b7c9924a19680fb38e2.png)



更新阶段

----



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



![](https://img-blog.csdnimg.cn/466c4f3e68604db1b719529ecbe85af7.png)



### 钩子函数 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




![](https://img-blog.csdnimg.cn/dde2fed3e37643bf94d2e9359dbda476.png)

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>

}

}

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>