React类组件生命周期与this关键字

类组件生命周期

参考链接
一图胜千言（不常用的生命周期函数已隐藏）

代码：

//CC1.js
import { Component } from "react";

export default class CC1 extends Component {
  constructor(props) {
    super(props);
    console.log("construtor");
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log("component Did Mount");
  }

  componentDidUpdate() {
    console.log("component Did Update");
  }

  increaseCount() {
    console.log("this:", this);
    this.setState((preState) => ({
      count: preState.count + 1,
    })); 
  }

  componentWillUnmount() {
    console.error("unmount");
  }
  render() {
    console.log("render");
    let { count } = this.state;
    return (
      <>
        <div>类组件一</div>
        <p>{count}</p>
        <div>
          <button onClick={this.increaseCount}>count+1</button>
        </div>
      </>
    );
  }
}

组件挂载

  组件初次挂载时，先执行构造方法中的内容，接着是render方法，最后是componentDidMount钩子；（通过打印语句可验证）

组件更新

问题：当我们点击按钮更新count时，会发现控制台报错，并没有成功使得count+1。这是因为在函数increaseCount中，this的指向丢失了。
解决问题：
（1）在构造方法中通过bind方法绑定this指向；

constructor(props) {
    super(props);
    console.log("construtor");
    this.state = {
      count: 0,
    };
    this.increaseCount = this.increaseCount.bind(this);
}

（2）将increaseCount方法改成箭头函数的形式；
参考链接

increaseCount = () => {
    console.log("this:", this);
    this.setState((preState) => ({
      count: preState.count + 1,
    }));
  };

（3）在调用increaseCount方法的时候使用bind函数绑定this指向：

<div>
     <button onClick={this.increaseCount.bind(this)}>count+1</button>
</div>

  上述三种方法解决了this指向的丢失问题。
  当我们再点击按钮就可以更新count的状态了，此时组件中函数的执行顺序是，render =》componentDidUpdate。

组件卸载

  在根组件中引入类组件，模拟组件的卸载；
代码：

//App.jsx
import { useState } from "react";
import CC1 from "./CC1";
function App() {
  const [flag, setFlag] = useState(true);
  return (
    <>
      <div>
        <div>App</div>
        <div>{flag ? <CC1 /> : ""}</div>
        <button onClick={() => setFlag(!flag)}>destory/load</button>
      </div>
    </>
  );
}

export default App;

点击按钮可模拟类组件CC1的卸载，此时函数componentWillUnmount中的代码会执行。

函数式组件

  现在官方已经推崇函数式组件，因为其比类组件简化了很多，没有烦人的this指向和那么多的生命周期函数。通过很多hooks也可以模拟组件的生命周期。
  类组件上述的众多生命周期函数，在函数式组件中只需要一个useEffect hook就可以达到一样的效果，并且代码量大大减少。
代码：

import { useEffect, useState } from "react";

export default function Fc() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("count更新了");
    return () => {
      console.log("preCount", count);
    };
  }, [count]);
  const increaseCount = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div>Fc</div>
      <p>{count}</p>
      <button onClick={increaseCount}>count+1</button>
    </div>
  );
}

解释：
  useEffect钩子函数又称清理副作用的函数。
  上述的useEffect的依赖项为[count]，说明函数主体内的内容会在组件初次挂载时，以及count更新时会执行，相当于类组件中的componentDidMount函数和componentDidUpdate函数。
  useEffect钩子可以返回一个函数，又称为清理函数（例如可以清理定时器等等）。这个清理函数中的代码，会在组件更新时，以及组件卸载时执行，在其中可以拿到组件更新之前或者卸载之前的状态。模拟了类组件中的componentWillUnmount函数和带参数的componentDidUpdate（可以获取上次的状态）