如何区分useMemo和useCallback在React性能优化中的具体应用与效果？

本文共计1073个文字，预计阅读时间需要5分钟。

目录 + 引言 + 对比 + useMemo + useCallback + 引言 + 在介绍这两个hooks的作用之前，我们先来回顾一下React中的性能优化。

在hooks出现之前，如果组件包含内部state，我们通常基于class的范式来创建组件。

目录

• 引言
• 对比
• useMemo
• useCallback

引言

在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于：

调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更新 基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新。

在hooks出来之后，我们能够使用function的形式来创建包含内部state的组件。但是，使用function的形式，失去了上面的shouldComponentUpdate，我们无法通过判断前后状态来决定是否更新。而且，在函数组件中，react不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。