web0715/16.react/react高阶/project1/src/components/LearnUseCallBack.jsx

import {useState,useCallback} from 'react';
/**
 * useCallback
 * 允许在多次渲染中缓存函数的
 * const cachedFn = useCallback(fn, dependencies)
 * fn：想要缓存的函数
 * dependencies：有关是否更新 fn 的所有响应式值的一个列表
 */
function Other({onClick1,aa}) {
    return (
        <>
            <button onClick={onClick1}>修改名字</button>
            <input type="text" onChange={aa} />
        </>
    )
}
function LearnUseCallback() {
    const [name,setName] = useState("喜羊羊")
    const [age,setAge] = useState(7)
    const changeName = useCallback(() => {
        setName("小花")
    }, [])
    const changeAge = useCallback(()=>{
        setAge(age + 2)
    },[age])
    function showMain() {
        setName("牛魔王")
    }
    return(
        <>
            <h1>useCallback</h1>
            <p>我叫{name}</p>
            <p>今年{age}岁</p>
            <h1 onClick={showMain}>出现</h1>
            {/* <Other onClick1={changeName} aa={changeAge} /> */}

        </>
    )
}
export default LearnUseCallback;