上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

usePrevious

Tags:
State

一个用于保留状态上次一渲染的「不同的」值的 React Hook。

场景

  • 记录上一状态： 用于记录状态的变化，以便在下一次渲染时进行相关操作。
  • ...

演示

源码
CurCount:
0
PreCount:
undefined
PrePreCount:
undefined
PrePrePreCount:
undefined
Count:
0
undefinedundefinedundefinedundefinedundefinedundefined

用法

const prevState = usePrevious(state)

// 当 state 从 1 变为 2 时，prevState 的值为 1

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const previous = usePrevious(state, options)

状态 State

你希望保持前一个值的状态，可以是任意合法的 JavaScript 类型。

选项 Options

interface UsePreviousOptions {
  /**
   * 一个 `isEqual` 函数，用于比较前一个值和当前值是否相等，默认使用 `Object.is`。
   *
   * @param previous 前一个值。
   * @param current 当前值。
   * @returns 如果相等则返回 `true`，否则返回 `false`。
   * 
   * @defaultValue `Object.is`
   */
  isEqual?(previous: any, current: any): boolean
  /**
   * 是否深度比较。
   *
   * @defaultValue false
   */
  deep?: boolean
}

如果 deep 为 true，则会忽略自定义的 isEqual 函数，转而采用内置的深比较的策略。

返回值

状态上次一渲染时的不同值。