react生命周期函数

// 生命周期的钩子函数

三大阶段

1. 挂载阶段
   // constructor 构造函数
   // 1. 一次生命周期中，只会触发一次
   // 2. 一般是用来做 state 的 初始化工作
   // 3. 使用它来做提前的 事件处理函数 this 绑定问题
   // render 函数
   // 1. 一次生命周期中，触发多次
   // 2. 主要是用来返回 组件的模板内容的
   // 3. 只要 state 、 props 发生变化，那么这个函数默认情况下一定会重新执行。（要看是否处理 shouldComponentUpdate）
   // 4. 如果调用了 force­Update() 的话，那么render一定会重新执行
   // 5. 能否发生ajax请求？（不能）
   // componentWillMount 挂载之前（过期）
   // static getDerivedStateFromProps(props, state) 派生state数据 (react 中的计算属性)
   // 1. 触发在 render 之前，挂载与更新阶段都会触发
   // 2. 必须返回对象或者 null。返回的如果是对象的话，会与 state 对象合并成一份新的 state。如果是 null 的话就不做处理
   // componentDidMount 挂载完成
   // 1. 发生ajax请求
   // 2. 可以得到真实的DOM对象了

2. 更新阶段
   // static getDerivedStateFromProps(props, state)
   // shouldComponentUpdate(nextProps, nextState) 我是否应该更新呢？
   // 1. 比较重要，是实现性能优化的一个点
   // 2. 必须提供返回值，返回一个布尔类型的值，如果为 true ，更新流程往下走。 如果为 false, 更新流程结束。
   // render 函数
   // componentWillUpdate() 更新之前 (过期了)
   // getSnapshotBeforeUpdate(prevProps, prevState) 替代更新之前
   1. 更新之前，
   2. 必须有返回值或者返回null。返回值的内容会给到
      componentDidUpdate 的第三个参数
      componentDidUpdate(prevProps, prevState, snapshot) 更新完成，并且真实DOM也更新完成

3. 销毁阶段
   componentWillUnmount 销毁之前
   1. 做一些清理工作。

import React from "react";
import ReactDOM from "react-dom";

// class Hello extends React.Component {
//   constructor() {
//     super();

//     console.log("构造函数");

//     this.state = {
//       msg: "我的天"
//     };
//   }

//   render() {
//     console.log(this.state);

//     return (
//       <div>
//         <h1>Hello, {this.state.name}</h1>
//         <button
//           onClick={() => {
//             this.setState({
//               msg: "天的我"
//             });
//           }}
//         >
//           点我，修改msg
//         </button>
//       </div>
//     );
//   }

//   static getDerivedStateFromProps(props, state) {
//     console.log(props);
//     console.log(state);
//     return {
//       name: "张三"
//     };
//   }

//   componentDidMount() {
//     console.log("挂载完成");
//   }
// }

class Hello extends React.Component {
  state = {
    fruits: ["Apple", "Banana", "Orange"],
    msg: "hello"
  };

  static getDerivedStateFromProps(props, state) {
    console.log("派生");
    return {
      fruitsNum: state.fruits.length
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 如何判断是 fruits 更新了呢？
    if (nextState.fruits.length !== this.state.fruits.length) {
      return true;
    } else {
      return false;
    }
  }

  getSnapshotBeforeUpdate() {
    return "123";
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot);
  }

  render() {
    console.log("render");
    return (
      <div>
        <p>水果数量有：{this.state.fruitsNum}</p>
        <ul>
          {this.state.fruits.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
        <button
          onClick={() => {
            this.setState({
              fruits: [...this.state.fruits, "西瓜"]
            });
          }}
        >
          点我，新增一个西瓜
        </button>

        <button
          onClick={() => {
            this.setState({
              msg: "world"
            });
          }}
        >
          修改 msg
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Hello />, document.getElementById("root"));