React自学笔记（九）---react生命周期函数

先在跟页面对于生命周期函数页面的引用

import Lifecycle from ‘./components/Lifecycle’

在根页面上返回<Lifecycle />

下面是生命函数的编写，Lifecycle.js：

import React, { Component } from 'react';
class Lifecycle extends Component {
    constructor(props) {
        console.log('01构造函数')
        super(props);
        this.state = { 
            msg:'我是一个msg'
         };
    }
    //组件将要挂载的时候触发的生命周期函数
    componentWillMount(){
        console.log('02组件将要挂载')
    }
    //组件挂载完成的时候触发的生命周期函数
    componentDidMount(){
        console.log('04组件将要挂载')
    }

    //是否要更新数据  如果返回true才会执行更新数据的操作
    shouldComponentUpdate(nextProps,nextState){
        console.log('01是否将要更新')
        console.log(nextProps)
        console.log(nextState)
        return true
    }

    //将要更新数据的时候触发
    componentWillUpdate(){
        console.log('01组件将要更新')
    }

    //组件更新完成
    componentDidUpdate(){
        console.log('04组件更新完成')
    }
    //你在父组件里面改变props传值的时候触发的
    componentWillReceiveProps(){
        console.log('父子组件传值，父组件里面改变了props的值触发的方法')
    }
    setMsg=()=>{
        this.setState({
            msg:'我是改变后的数据'
        })
    }

    //组件销毁的时候触发的生命周期函数   用在组件销毁的时候执行操作
    componentWillUnmount(){
        console.log('组件销毁了')
    }

    render() {
        console.log('03数据渲染render')
        return (
            <div>
                生命周期函数演示---{this.state.msg}---{this.props.title}
                <br />
                <br />
                <button onClick={this.setMsg}>更新msg的数据</button>
            </div>
        )
    }
}

export default Lifecycle;

生命周期函数事件触发具有一定的顺序：组件加载之前>组件加载完成>组件更新数据>组件销毁

App.js页面：

import React, { Component } from 'react';
// import logo from './assets/images/logo.svg';
import './assets/css/App.css';
//引入Lifecycle组件
import Lifecycle from './components/Lifecycle'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      title:' 我是App组件的title',
      flag:true
     };
  }
  setFlag=()=>{
    this.setState({     
      flag:!this.state.flag
    })
  }

  setTitle=()=>{
    this.setState({
      title:'我是父组件改变后的title'
    })
  }

  //render 模板   jsx
  render() {
    return(
      <div className="App">
        {this.state.flag?<Lifecycle title={this.state.title} />:""}
        <br />
        <br />
        <button onClick={this.setFlag}>挂载和销毁生命周期函数组件</button>
      </div>
    )
  }
}

export default App;

页面加载后显示打印的顺序：

01构造函数>02组件将要挂载>03数据渲染render>04组件将要挂载>01是否将要更新

点击更新msg按钮：

01组件将要更新>03数据渲染render>04组件更新完成

点击挂载和销毁生命周期函数组件：

组件销毁了

再次点击挂载和销毁生命周期函数组件：

页面重加载