/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState, useCallback, useContext} from 'react'
import Home from './pages/home'

import './App.css';

function App() {
  const [msg, setMsg] = useState<string>();
  const [title, setTitle] = useState<string>('默认标题');

  const childMessage = (msg:string) => {
    setMsg(msg)
  };
// 实现update
  useEffect(() => {
    console.log('全局state变化了就执行');
  })
// 实现didMount
  useEffect(() => {
    console.log('页面加载完只执行一次');
  }, [])
// 依赖msg变化执行
  useEffect(() => {
    console.log('依赖于msg,msg变化了就执行');
  }, [msg])

  return (
    <div className="App">
      <p>来自子组件的参数: { msg }</p>
      <p>Title { title }</p>
      <button onClick={ () => {setTitle('标题变化了')} }>测试非msg变化</button>
      <Home childMessage={childMessage}/>
    </div>
  );
}

export default App;

补充 组件销毁时执行
useEffect(() => {
    return () => {
        console.log('组件卸载就执行')
    };
})