usePrevious

作用

保存上一次状态的 Hook。

原理

每次状态变更的时候，比较值有没有发生变化，变更状态

源码

import { useRef } from 'react'

export type ShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean

const defaultShouldUpdate = <T>(a?: T, b?: T) => !Object.is(a, b)

function usePrevious<T>(
  state: T,
  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate
): T | undefined {
  // 保存上一次的状态
  const prevRef = useRef<T>()
  // 保存当前的状态
  const curRef = useRef<T>()

  // 判断当前状态和上一次状态是否相同
  if (shouldUpdate(curRef.current, state)) {
    // 如果不相同，将上一次状态更新为当前状态
    prevRef.current = curRef.current
    // 将当前状态更新为最新状态
    curRef.current = state
  }

  // 返回上一次状态
  return prevRef.current
}

export default usePrevious