组件化开发-05-生命周期——componentDidUpdate-更新&componentDidMount-载入-须使用setState方法修改状态值&componentWillUnmount-卸载

react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改，必须使用setState方法 & componentWillUnmount-组件卸载

组件的生命周期

图解

• componentDidMount
  • 完成组件挂载后触发，类似于Vue中mounted
  • 一般用于调用后台接口获取数据并更新state中的数据
  • 组件内部状态的修改必须使用setState方法
• componentWillUnmount
  • 将要完成组件卸载时触发，类似vue中的beforeDestroy
  • 一般用于销毁相关的资源（定时任务；取消事件绑定）
• componentDidUpdate
  • 更新阶段触发

class TestClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
      timer: null
    }
  }
  componentDidMount () {
    console.log('组件挂载后触发')
    let t = setInterval(() => {
      console.log(1)
    }, 1000);
    this.setState({
      timer: t
    })
  }
  componentWillUnmount () {
    console.log('组件将要销毁时触发')
    clearInterval(this.state.timer)
  }
  render () {
    return (
      <div>生命周期</div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: true
    }
  }
  componentDidMount () {
    setTimeout(() => {
      this.setState({
        flag: false
      })
    }, 2000)
  }
  render () {
    return (
      <div>
        {this.state.flag && <Tab/>}
      </div>
    )
  }
}

实例

第一步：src下新建文件夹components，下面新建05.js

/*
  组件的生命周期
*/
import React from 'react'

class TestClass extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      n: 1,
      timer: null
    }
    console.log('----------------' + 1)
  }
  render () {
    // 组件依赖的数据(包括内部的state数据和父组件传递的props数据)如果发生变化，那么render方法就重新触发
    console.log('----------------' + 2)
    return (
      <div>
        <div>测试组件生命周期</div>
        <div>{this.state.n}</div>
        <div>{this.props.msg}</div>
      </div>
    )
  }
  componentDidUpdate () {
    // 组件内容更新时触发
    console.log('update')
  }
  componentDidMount () {
    console.log('----------------' + 3)
    // 该组件完成挂载后触发
    // 一般用于获取后台的接口数据
    // 或者完成一些初始化操作
    // console.log('挂载成功')
    setTimeout(() => {
      // 修改状态的值:不可以直接修改，必须使用setState方法进行修改
      // this.state.n = 2;
      // console.log(this.state.n)
      this.setState({
        n: 2
      })
    }, 3000)
    let timer = setInterval(() => {
      console.log('click')
    }, 1000)
    this.setState({
      timer: timer
    })
  }
  componentWillUnmount () {
    // 该组件将要卸载时触发：一般用于清除一些资源
    console.log('该组件已经被卸载')
    // 销毁定时任务
    clearInterval(this.state.timer)
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: true,
      msg: 'nihao'
    }
  }
  componentDidMount () {
    setTimeout(() => {
      this.setState({
        flag: false,
        msg: 'hello'
      })
    }, 5000);
  }
  render () {
    return (
      <div>
        {this.state.flag? <TestClass msg={this.state.msg}/>: <div>不显示组件</div>}
      </div>
    )
  }
}

export default Parent

第二步：App.js中进行引入

import React from 'react';
import './App.css';
import TestClass from './component/05-组件的生命周期'

function App () {
  return (
    <div>
      <TestClass/>
    </div>
  )
}

export default App;

界面显示

5-01

5-02

5-03

打印界面