usePrevious

记录上一次状态 Hook

代码演示

基本用法

之前值：

当前值：0

Live Editor

Copy

function Example() { const [count, setCount] = useState(0) const previousCount = usePrevious(count) return ( <div> <div>之前值：{ previousCount } </div> <div>当前值：{ count } </div> <Button.Group style={{ marginTop: 10 }}> <Button onClick={() => setCount(c => c + 1)}> increase </Button> <Button onClick={() => setCount(c => c - 1)}> decrease </Button> </Button.Group> </div> ) }

function Example() {
  const [count, setCount] = useState(0)
  const previousCount = usePrevious(count)
  return (
    <div>
      <div>之前值：{ previousCount } </div>
      <div>当前值：{ count } </div>
      <Button.Group style={{ marginTop: 10 }}>
        <Button onClick={() => setCount(c => c + 1)}> increase </Button>
        <Button onClick={() => setCount(c => c - 1)}> decrease </Button>
      </Button.Group>
    </div>
  )
}

API

type UsePrevious = <T>(value: T) => T | undefined