react useEffect生命周期

useEffect 接收两个参数。

参数一：是一个回调函数；

参数二：是一个依赖数组；

当依赖数组中的数据发生改变之后回调函数会重新执行

useEffect 对应的生命周期钩子函数如下：

1、第二个参数为空数组的时候，回调函数只有在组件初始化的时候执行

2、第二个参数不存在的时候，回调函数会在每一次数组更新的时候都会执行

3、参数二中的数组存在数据的时候，那么回调函数会在数组中的任何一个数据改变之后执行

4、参数一的回调函数可以返回一个 function，这个返回的 function 在组件销毁的时候执行

import React, { useEffect, useState } from "react";

function ListCircle() {
  const [count1, setCount1] = useState(1);
  const [count2, setCount2] = useState(1);
  const [count3, setCount3] = useState(1);
  const [count4, setCount4] = useState(1);
  const [count5, setCount5] = useState(1);
  const [count6, setCount6] = useState(1);

  //
  useEffect(() => {
    console.log("可以写多个，都会执行，不会影响 - 初始化");
  }, []);

  //
  useEffect(() => {
    console.log("第二个参数为空 - 初始化的时候执行一次"); // 初始化的时候执行一次
    return () => {
      console.log("组件销毁");
      // 组件销毁的时候执行(每一个useEffect里面都可以写)
    };
  }, []);

  //
  useEffect(() => {
    console.log("第二个参数不存在 - 每一次页面更新都会执行"); // 每一次页面更新都会执行
  });

  //
  useEffect(() => {
    console.log("第二个参数包含count1和count2 - 只有在1和2改变的时候执行"); // 只有在1和2改变的时候执行
  }, [count1, count2]);

  return (
    <div>
      <button onClick={() => setCount1(count1 + 1)}>count1 = {count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>count1 = {count2}</button>
      <button onClick={() => setCount3(count3 + 1)}>count1 = {count3}</button>
      <button onClick={() => setCount4(count4 + 1)}>count1 = {count4}</button>
      <button onClick={() => setCount5(count5 + 1)}>count1 = {count5}</button>
      <button onClick={() => setCount6(count6 + 1)}>count1 = {count6}</button>
    </div>
  );
}

export default ListCircle;