import { useEffect, useState } from "react";

function Test({name,age}){
    // 用法 3. 组建卸载前执行
    // 处理一些冗余
    useEffect(()=>{
        return(
            console.log("即将卸载组建")
        )
    },[])

    return(
        <div>
            <p>我的名字：{name}</p>
            <p>我的年龄：{age}</p>
        </div>
    )
}

function Effect({name=" "}){
    let [msg,setMsg] = useState("这是一条消息")

    // 用法 1. useEffect(()=>{})
    // 每次组件渲染时都会调用 执行一些副作用代码
    // useEffect(()=>{
    //     console.log("副作用代码")
    // })

    // 用法 2. useEffect(()=>{},[])
    // 最主要的是第二个参数是空数组[] , 模拟生命周期 componentDidMount 挂载后调用
    // useEffect(()=>{
    //     console.log("模拟生命周期 componentDidMount 挂载前后调用")
    // },[])

    // 用法 4. useEffect(()=>{},[n])
    // 监听 state 或者 props 发生变化 （组建初次渲染也会发生监听事件）
    useEffect(()=>{
        console.log("信息发生变化")
    },[msg,name])

    return(
        <div>
            <h3>useEffect</h3>
            <p>{msg}</p>
            <p>名字：{name}</p>
            <Test name={"Best"} age={17}/>
            <button onClick={()=>{
                setMsg("这是修改后的msg")
            }}>修改msg</button>
        </div>
    )
}

export default Effect;