React生命周期

React的生命周期一直迷迷糊糊的,今天彻底把他搞清楚.分享一下

这是app.js

import Life from './day04_Life'

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       display: true
    }
  }
  show(){
    if(this.state.display){
      return <Life title="xxxxxx" />
    }
  }
  render() {
    return (
      <div>
        {this.show()}
        <button onClick={
          ()=>{
            this.setState({display: false})
          }
        } >卸载</button>
      </div>
    )
  }
}

这是Life.js子文件

import React, { Component, cloneElement } from 'react'

export default class Life extends Component {

  constructor(props) {
    super(props)
  
    this.state = {
       time: new Date().toString()
    }
  }
  
  componentWillMount() {
    console.log('componentWillMount将要挂载')
  }
  componentDidMount() {
    console.log('componentDidMount挂载完毕时')

    setInterval(()=>{
      this.setState({
        time: new Date().toString()
      })
    },3000)
  }
  componentWillUpdate() {
    console.log('componentWillUpdate 将要更新UI')
  }
  //跟新之前的 属性和 状态值
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate',prevProps,prevState)
  }

 
  componentWillUnmount() {
    console.log('componentWillUnmount 将要销毁时')
  }

  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps 将要收到props属性')
  }
  
  //通过返回值: true 代表更新页面 false代表不更新页面
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate')
    return true
  }
  
  render() {
    return (
      <div>
        {this.state.time}
      </div>
    )
  }
}

来源：CSDN

作者：真是敞亮

链接：https://blog.csdn.net/weixin_45743297/article/details/103926107