useEffect、useCallback、useMemo和memo的区别

前言

在构建现代 React 应用时，性能优化是一个关键考虑因素。随着组件的复杂性增加，合理管理状态和副作用变得尤为重要。React 提供了多个工具来帮助开发者优化组件性能，其中最常用的包括 useEffect、useCallback、useMemo 和 React.memo。这些 API 各自有着不同的用途和机制，但它们的目标一致：通过有效地缓存和副作用，提升应用的响应速度和用户体验

概述

useEffect：

useEffect(setup, dependencies?)

参数

setup是一个函数，称之为副作用函数，在函数内可以放置要执行的操作，同时需要返回一个清理（cleanup）函数

dependencies是一个可选的数组：

• dependencies没有时：组件初始化渲染和更新时，setup函数都会执行
• dependencies是一个空数组时：setup函数只执行一次；
• dependencies中放置依赖项时：在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。（先清理再重新运行）

返回值

useEffect返回undefined

useCallback：

useCallback(function,dependencies)

参数：

function

1、定义：想要缓存的函数

2、特点：

• 可以接受任何参数并返回任何值
• React只会把这个函数返回给你，而不是直接调用！！（由你自己决定何时调用）
• 进行下一次渲染时，dependencies没有变化，则funtion返回相同的函数；若有变化，React将新传入的函数缓存以便后续使用

dependencies

1、定义：有关是否更新function的所有响应值的一个列表

2、特点：

• 响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。
• 依赖列表必须具有确切数量的项，并且必须像 [dep1, dep2, dep3] 这样编写
• React 使用 Object.is 比较每一个依赖和它的之前的值。

返回值：

在初次渲染时，useCallback 返回你已经传入的 function 函数

在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 function 函数；否则返回这一次渲染传入的 function。

useMemo

const cachedValue = useMemo(calculateValue, dependencies)

参数：

calculateValue

1、定义：要缓存计算值的函数

2、特点：

• 没有任何参数，可以返回任意类型
• 首次渲染时调用该函数。之后的渲染中，dependencies不变，React返回相同值；否则，再次调用函数并返回最新结果，并缓存结果供下次使用

dependencies

同useCallback的返回值特点一样

返回值：

在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果。

在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。

memo

const MemoizedComponent = React.memo(MyComponent);

参数

• 接受两个参数：一个组件和一个可选的比较函数。

返回值

• 返回一个新的组件，只有在 props 发生变化时才会重新渲染。

原理

useEffect

该Hook函数身并不缓存任何值或对象，它通过控制副作用的执行时机和频率来优化 React 应用的性能、来用于处理副作用，例如数据获取、订阅和手动操作 DOM。每当依赖项变化时，useEffect 会执行指定的回调函数。

useCallback

useCallback 通过缓存函数的引用，避免在每次渲染时重新创建函数，从而减少不必要的子组件渲染。

useMemo

useMemo 缓存计算的结果，避免每次渲染时重复计算开销大的值。

memo

React.memo不是一个Hook函数，而是一个高阶组件。它对组件的 props 进行浅比较，如果 props 没有变化，则返回先前的渲染结果，避免重新渲染。

扩展：

memo一般可以分别和useMemo、useCallback结合使用，useMemo和useCallback可以控制作为prop传入子组件中的函数或者值不变，此时包装在memo中的组件因传入prop不变而返回先前的渲染结果，避免重复渲染。