hooks useCallback基础用法

useCallback作用：在组件多次重新渲染的时候缓存函数


代码如下：

/**
 * 实际开发中经常遇到子传父，因此需要性能优化的话就要使用到useCallback
 * 
 * 备注：只使用memo的话，通常场景是父传子，不涉及子传父，因此不需要useCallback
 */

import { memo, useState, useCallback } from 'react';

const Input = memo(function Input({ onchange }) {
    console.log('我是子组件，我重新渲染了');
    return <input onChange={e => onchange(e.target.value)} />;
})

function Layout() {
    const [count, setCount] = useState(0);

    const handleChange = useCallback(value => {
        console.log(value);
    }, []);

    return (
        <div>
            <Input onchange={handleChange} />
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
        </div>
    )
}

export default Layout;