React+Hooks useMemo和useCallback的使用

最新推荐文章于 2024-07-05 17:54:51 发布

本宝宝很开心

最新推荐文章于 2024-07-05 17:54:51 发布

阅读量186

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/weixin_44136421/article/details/118491843

版权

react 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在React中利用useMemo和useCallback优化组件性能，特别是在处理与状态值相关的函数调用，以避免不必要的渲染。通过实例演示了如何仅在num值变化时执行getNum方法，展示了这两个Hook在提升性能方面的作用。

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

在使用function的形式创建组件时，内部state就无法向class声明组件去通过shouldComponentUpdate进行判断值是否变化，这样就会出现较大的性能消耗，所以就有了useMemo和useCallback,(PS:useMemo返回缓存的变量，useCallback返回缓存的函数)
1.useMemo

import React,{useMemo, useState} from 'react';
export default function NumMemo() {
    const [num, setNum] = useState(1);
    const [val, setValue] = useState('');
    function getNum() {
        console.log("num",num)
    }
    return <div>
        <h4>num:{num}------val:{val}--------{getNum()}</h4>
        <div>
            <input value={val} onChange={event => setValue(event.target.value)}/>
            <button onClick={() => setNum(num + 1)}>num+1</button>
        </div>
    </div>;
}

根据上面的例子，无论是改变count还是num的值，都会引起组件的重新渲染，getNum方法都会执行，getNum方法里面的逻辑只跟num值有关，所以我们只想在num值改变时在执行getNum方法，这时useMemo就派上用场了。

import React,{useMemo, useState} from 'react';
export default function NumMemo() {
    const [num, setNum] = useState(1);
    const [val, setValue] = useState('');
    const getNum=useMemo(()=>{
        console.log('num',num)
    },[num])
    return <div>
        <h4>num:{num}------val:{val}--------{getNum}</h4>
        <div>
            <input value={val} onChange={event => setValue(event.target.value)}/>
            <button onClick={() => setNum(num + 1)}>num+1</button>
        </div>
    </div>;
}

此时，只有当num值改变时才会执行getNum方法
2.useCallback （useCallback(fn, deps) 相当于 useMemo(() => fn, deps)）
useCallback单独使用实际性能会更差，有助于提高性能的场景：1.函数定义时需要进行大量运算2.需要比较的场景，配合useMemo使用