VIP20/15_React/day-4/code/my-app/src/components/LearnUseEffect.jsx

import { useEffect, useState } from 'react';

function LearnUseEffect() {
  let timer;
  let [count, setCount] = useState(0);
  let [time, setTime] = useState(new Date());
  //! 第一种方式 直接传入 一个函数:当组件第一次渲染后（或者 组件更新后） 会执行该回调
  // componentDidMount componentDidUpdate componentWillUnmount
  // useEffect(() => {
  //   console.log(`output->effect`);
  // });
  //! 第二种方式： 传入两个参数，第一个为回调函数，第二个 为 空数组
  // 只有组件第一次渲染完后执行一次回调，之后不会在执行
  // useEffect(() => {
  //   console.log(`output->只有组件渲染后执行一次`);
  // }, []);

  //! 第三种：传入两个参数，第一个为回调函数，第二个 为 数组，在数组中指定该副作用依赖的状态
  //   当组件第一次渲染后执行一次，之后当依赖的数组中状态发生改变时 才会再执行该回调

  // useEffect(() => {
  //   console.log(`output->只有组件渲染后执行一次`);
  // }, [count]);
  // 该副作用可以依赖多个状态

  //! 第四种:  如果给传入的回调函数 返回一个函数fn，该fn会在组件卸载前执行

  useEffect(() => {
    timer = setInterval(() => {
      console.log(`output->timer`, timer);
      setTime(new Date());
    }, 1000);

    return () => {
      // 会在组件卸载前执行
      clearInterval(timer); // 是不能清楚
    };
  }, []);
  // useEffect(() => {
  //   console.log(`output->只有组件渲染后执行一次`);
  // }, [count, time]);

  return (
    <div>
      <p>
        学习useEffect：{count}, {time.toLocaleString()}
      </p>
      <button onClick={() => setCount(10)}>change</button>
      <button onClick={() => setTime(new Date())}>change time</button>
    </div>
  );
}

export default LearnUseEffect;