react类组件生命周期
react的函数式组件没有生命周期函数这一说,函数式组件要实现生命周期的功能,需要在副作用函数中实现。下面介绍的是类组件的生命周期函数。
react生命周期图解
-
初始化阶段:
先执行
constructor
函数 =》然后是render
函数 =》然后是componentDidMount
函数。/** * 这个函数会在render函数执行之后立即执行, * 1. 这时这个函数中可以执行一些关于dom的操作 * 2. 也可以做一些请求后端数据的工作 * 3. 也可以做一些定时器之类的活 */ componentDidMount() { console.log("初始化阶段的最后一个执行函数"); }
-
运行阶段
先执行
render
函数=》然后是componentDidUpdate
函数/** * 该函数有三个参数 * 第一个参数是之前的属性 * 第二个参数是之前的状态 * * 在这个函数中做一些操作,都需要在判断条件中执行,不然很容易造成死循环 */ componentDidUpdate(prevProps, prevState) { console.log(prevProps, prevState); console.log("更新阶段"); }
-
销毁阶段
componentWillUnmount
函数/** 在组件销毁的时候执行 1. 清除定时器 2. 解绑dom事件 */ componentWillUnmount() { console.log("组件销毁了"); }
父组件代码
import React, { Component } from "react"; import Demo from "./Demo"; export default class App extends Component { state = { flag: true, }; render() { return ( <div> <h2>App</h2> {this.state.flag && <Demo />} <button onClick={() => { let flag = this.state.flag; flag = !flag; this.setState({ flag }); }} > 显示/隐藏子组件 </button> </div> ); } }
子组件代码
import React, { Component } from "react"; export default class Demo extends Component { constructor() { super(); this.state = { num: 0, }; } render() { return ( <div> Demo <h2>{this.state.num}</h2> <button onClick={() => { let num = this.state.num; num++; this.setState({ num }); }} > chang </button> </div> ); } /** * 这个函数会在render函数执行之后立即执行,这个函数只会执行一次 * 1. 这时这个函数中可以执行一些关于dom的操作 * 2. 也可以做一些请求后端数据的工作 * 3. 也可以做一些定时器之类的活 */ componentDidMount() { console.log("初始化阶段的最后一个执行函数"); } /** * 该函数有三个参数 * 第一个参数是之前的属性 * 第二个参数是之前的状态 * * 在这个函数中做一些操作,都需要在判断条件中执行,不然很容易造成死循环 */ componentDidUpdate() { console.log("更新阶段"); } // 这个函数在组件销毁的时候执行,这个函数只会执行一次 componentWillUnmount() { console.log("组件销毁了"); } }