VIP26/react/study4/project/src/components/useCallBack.jsx

//useCallBack 做缓存 缓存一个函数
import { useCallback,useState,useEffect } from "react";

// props中自带一个children属性 在React中
function Main({children,onClick}) {
    // 副作用
    useEffect(()=>{
        console.log("发生改变")
    })

    return(
        <button onClick={onClick}>{children}</button>
    )
}



export default function TestUseCallBack() {
    let [word,setWord] = useState("一个普通文本");
    
    // function handleClick(){
    //     setWord("这是一个新文本1")
    //     console.log("点击了")
    // }
    const handleClick = useCallback(()=>{setWord("这是一个新文本")},[])

    return(
        <div>
            <p>{word}</p>
            <Main onClick={handleClick}>修改内容</Main>
        </div>
    )
}