useMemo和useCallback

diaojw090

于 2021-03-23 15:37:18 发布

阅读量113

点赞数

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

本文链接：https://blog.youkuaiyun.com/diaojw090/article/details/115126325

版权

react 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了React Hooks中的useCallback和useMemo如何提升组件性能。通过使用useCallback缓存函数，避免不必要的重复计算，以及useMemo来避免在依赖未变时不必要的子组件渲染，从而实现更高效的渲染过程。这两个Hook让开发者能更好地控制组件的渲染策略，提高应用性能。

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

useCallback

之前如果我们在render中定义了一个方法：

render() {
    const {data} = this.state;
    const filter = data.filter(e => e.id !== 5);
    ...
}

那么我们知道每次render都会执行filter这个方法，其实你是不是觉得当data没变这个方法只要执行一次就好了，看看react hook怎么做的

function demo() {
    ...
    const filter = useCallback(() => {
        data.filter(e => e.id !== 5)
    }, [data])
    ...
}

看懂了吗？这个完全就是我之前提出来的思路啊，它把这个方法执行的结果缓存起来了！！！后面的[data]就是当data不变，也不会多执行。
useMemo
同样的道理，对于一个组件，用useMemo就好啦

const mainInfoMemo = useMemo(() => {
    return MAIN_INFO.map(e => (
        <div key={e.key}><b>{e.label}</b>：
            {curSubject[e.key]}
        </div>
    ));
}, [curSubject]);

当curSubject不变，当你用这个组件的时候一直不会再次渲染。
总结：某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理