hooks useCallback基础用法

怕冷的火焰（~杰）

已于 2024-05-29 16:08:45 修改

阅读量527

点赞数 7

分类专栏： React Hooks 文章标签： react.js

于 2023-11-22 17:10:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50236973/article/details/134557859

版权

React Hooks 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在React开发中如何使用useCallback来优化子组件向父组件传递回调函数，以减少不必要的重渲染，提高性能。特别是在父组件需要更新时，useCallback能有效缓存函数，仅在必要时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;