react中的useCallback 有什么作用?

在 React 中,useCallback 是一个优化性能的 Hook,主要用于 记忆化 (memoization)函数,从而防止在每次渲染时创建新的函数实例。具体来说,useCallback 可以帮助你确保某个函数只会在依赖项发生变化时才会重新创建,否则它会返回上一次的函数引用。

  • 适用场景 :函数作为 props 传递给子组件,或者作为 useEffect 依赖项时,可以使用 useCallback 优化性能。

  • 当函数比较简单或不传递给子组件时 ,没有必要使用 useCallback。React 会自动优化简单的函数,不需要显式缓

  • 举例一:传递函数给子组件: 当你将一个函数作为 prop 传递给子组件时,如果该函数在每次父组件渲染时都会重新创建,子组件也会重新渲染(如果该函数作为依赖项)。通过 useCallback,你可以确保只有在相关依赖变化时才会创建新的函数。

  • import React, { useState, useCallback } from 'react';

    function Child({ onClick }) {

    console.log("Child rendered");

    return <button onClick={onClick}>Click me</button>;

    }

    function Parent() {

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

    // 使用 useCallback 确保只有当 count 改变时,onClick 才会更新

    const handleClick = useCallback(() => {

    setCount(count + 1);

    }, [count]); // 依赖于 count

    return (

    <div>

    <Child onClick={handleClick} />

    <p>Count: {count}</p>

    </div>

    );

    }

    export default Parent;
    举例2 :与 useEffect 结合使用: useEffect 会在依赖项发生变化时重新运行,如果传给 useEffect 的回调函数总是被重新创建,可能会导致不必要的副作用执行。使用 useCallback 可以确保回调函数只有在必要时才被重新创建。

    import React, { useState, useEffect, useCallback } from 'react';

    function Example() {

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

    const memoizedCallback = useCallback(() => {

    console.log('Callback called');

    }, []); // 只有在依赖数组为空时,回调函数才会创建一次

    useEffect(() => {

    console.log('Effect ran');

    memoizedCallback();

    }, [memoizedCallback]); // 使用 memoizedCallback 作为 effect 的依赖

    return (

    <div>

    <p>Count: {count}</p>

    <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

    );

    }

相关推荐
树上有只程序猿26 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯