import { useEffect, useState } from 'react';

function MsgItem({ text, title }) {
  // 3 组件卸载前执行
  useEffect(() => {
    //
    return () => {
      // 这里返回的回调 会在组件卸载前执行
      // 可以在这里清除一些『垃圾』
      console.log('MsgItem卸载了');
    };
  }, []);

  return (
    <div>
      <h3>{title}</h3>
      <p>{text}</p>
    </div>
  );
}

export default function TestUseEffect({ name }) {
  let [msg, setMsg] = useState('啥也没有');
  // 1 每一次组件渲染 都有执行一些代码
  useEffect(() => {
    // 编写那些副作用代码
    // console.log('==组件渲染==');
  });

  // 2 模拟 componentDidMount
  useEffect(() => {
    console.log('===组件渲染后===');
  }, []);

  // 4 监听state或者props变化，执行setup（组件首次渲染 也会执行setup）
  useEffect(() => {
    console.log('msg变化了');
  }, [msg, name]);

  return (
    <div>
      <h3>useEffect</h3>
      <div>{msg && <MsgItem text={msg} title={'注意'} />}</div>
      <p>
        {msg}: {name}
      </p>
      <p>
        <button
          onClick={() => {
            setMsg(Math.random() + '');
          }}
        >
          change
        </button>
      </p>
    </div>
  );
}