用 prevState 改变状态

Question

我需要帮助理解 prevstate。我读过what is prevstate、reac-prevstate 和state and lifecycle。但我还是不明白。

export default function SignInUp(props) {
  const [toggleClass, setToggleClass] = useState(false)
  const { handleLogin, handleRegister } = props

  const toggleState = () => {
    setToggleClass(!prevState)
  }

  return (
    <div className='UserContainer' style={{display: "grid", justifyContent: "center ", height: "100vh", width: "100vw"}}>
      <div className='btncontainer' style={{gridRow: "2 / 3"}}>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signin</button>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signup</button>
      </div>
      <SignIn handleLogin={handleLogin} className={toggleClass ? 'Disabled' : null} style={{gridRow: "2 / 3" }}/>
      <SignUp handleRegister={handleRegister} className={toggleClass ? 'Disabled' : null}/>
    </div>
  )
}

Answer 1

当排队状态更新时，通常会访问前一个状态的值以计算下一个状态。举个反例。

/**
   * count +3 click handler using naive state updates.
   */
  const clickHandler1 = () => {
    // assume count equals some number n
    setCount(count + 1); // update queued, count === n, count = n + 1
    setCount(count + 1); // update queued, count === n, count = n + 1
    setCount(count + 1); // update queued, count === n, count = n + 1
    // when processed the count will be n + 1
  };

  /**
   * count +3 click handler using functional state updates.
   */
  const clickHandler2 = () => {
    // assume count equals some number n
    setCount((count) => count + 1); // update queued, count === n + 0, count = prevCount + 1
    setCount((count) => count + 1); // update queued, count === n + 1, count = prevCount + 1
    setCount((count) => count + 1); // update queued, count === n + 2, count = prevCount + 1
    // now when processed each call uses the result of the previous update
    // count will be n + 1 + 1 + 1, or n + 3
  };

如果您只是简单地将几个“标准”状态更新排入队列，那么每个更新都会覆盖之前的更新。 但是如果您要使用“功能性”状态更新，它们会访问之前的状态并返回一个新的状态值。

区别在于从前一个状态的值更新与从前一个渲染周期的状态值更新。

对于切换值，每个下一个状态必然依赖于上一个状态，以便正确切换。

const toggleState = () => {
  setToggleClass(toggleValue => !toggleValue);
}

这采用前一个状态，将其分配给一个名为 toggleValue 的变量，并返回该值的否定作为下一个状态值。