前言
在构建现代 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不变而返回先前的渲染结果,避免重复渲染。