react生命周期-渲染阶段

import React, { Component } from "react";

export default class Shengming extends Component {
  // 调用父类的 constructor方法；传递props属性，染发props属性起作用
  constructor(props) {
    super(props);

    // 定义初始值
    this.state = {
      num: 20,
    };
    console.log("1-1我是挂载阶段的第一个生命周期函数");
  }
  //   UNSAFE
  componentWillMount() {
    console.log("1-2挂载数据之前");
  }

  componentDidMount() {
    //   用来发送请求
    console.log("1-4数据已经挂载好了");
  }

  //   =======================更新阶段
  UNSAFE_componentWillReceiveProps() {
    // 在更新props属性的时候，会触发这个属性当你没有props这个参数的时候，就不会触发哈
    //有props的时候，就会触发
    console.log("2-1-props 在接受props属性之前,只有prps改变才会执行这个函数");
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 是否要跟新数据
    console.log("2-2-props 在接受props属性之前", nextProps, nextState);
    // return true; //这里表示是否跟新；true表示跟新数据，然后执行render函数； false表示不跟新数据不会执行后续的函数
    // Shengming.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.
    // 返回未定义的值，而不是布尔值。确保返回true或false。

    // 那我们什么时候，return true;如果我们 的数据发生变化了，就return true;
    // 数据没有发生改变，就return false

    return nextState.num == this.state.num

  }

  componentWillUpdate() {
    console.log("2--3跟新数据之前");
  }

  componentDidUpdate() {
    console.log("2--4跟新数据之后");
  }

  changeState() {
    console.log(1);
    this.setState({
      num: 30,
    });
  }

  static defaultProps = {
    bg: "pink",
    wi: "100px",
    he: "100px",
  };
   // ===================================第三阶段
   componentWillUnmount() {
      console.log("3-1组件销毁的时候执行");
        // 在最后一个生命周期中；执行事件的销毁；或者销毁某些值的引用；
        // 比如；你在这个组件中给document；注册了一个事件；
        // 当这个组件都消失了，按理说这个事件就应该销毁；
        // 但是如果你不做处理的话，那么这个事件在其他组件页面仍然会被触发哈；
   }

  render() {
    console.log("1-3render 标签渲染到页面");
    return (
      <div  style={{
          background: this.props.bg,
          width: this.props.wi,
          height: this.props.he,
        }}>
        123==》{this.state.num}
        <br />
        <button onClick={this.changeState.bind(this)}>按钮</button>
      </div>
    );
  }
}