3-useState + prevState

Time: 20200126

import React, {useState} from 'react'

function HookCounterTwo() {
    const initialCount = 0
    const [count, setCount] = useState(initialCount)
    return (
        <div>
            Count: {count}
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount(count + 1)}>加</button>
            <button onClick={() => setCount(count - 1)}>减</button>
        </div>
    )
}

export default HookCounterTwo

这样确实可以做到加减数据，但是从1-到现在的3-，相同的特点是，都不安全。

为什么说不安全呢？

看下面的代码：

import React, {useState} from 'react'

function HookCounterTwo() {
    const initialCount = 0
    const [count, setCount] = useState(initialCount)
    const incrementByFive = () => {
        for (let i  = 0; i < 5; i++) {
            setCount(count + 1)
        }
    }
    return (
        <div>
            Count: {count}
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount(count + 1)}>加</button>
            <button onClick={() => setCount(count - 1)}>减</button>
            <button onClick={incrementByFive}>加5</button>
        </div>
    )
}

export default HookCounterTwo

每次点击加5，但是实际上只是加1。

因为虽然执行了五次setCount(count + 1)，但是本函数体内读取的count始终都是相同的值，没有更新。

想要访问前一个状态，则需要用下面的setCount函数调用：

const incrementByFive = () => {
  for (let i  = 0; i < 5; i++) {
    setCount(previousCount => previousCount + 1)
  }
}

这样就可以了。

基于这个逻辑，我们就可以写加减 :

<button onClick={() => setCount(preCount => preCount + 1)}>加</button>
<button onClick={() => setCount(preCount => preCount- 1)}>减</button>

这个逻辑在类组件中也是存在的，比如：

incrementCount = () => {
  this.setState(prevState => {
    return {
      count: prevState.count + 1
    }
  })
}

注意这种写法需要加一个return。

END.