來自ReactHooks參考的這段代碼中的prevCount是什么？-有解無憂

嘗試學習 React Hooks 和一般的編碼新手，我注意到 prevCount 沒有事先宣告。prevCount 的值是多少，為什么不用像 const prevCount 那樣事先宣告呢？我不明白這是從哪里來的，它只是您在 setCount 或 useState 中宣告的一個變數，它訪問計數的默認值（在本例中為 initialCount）嗎？

  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount   1)}> </button>
    </>
  );
}

參考：https ://reactjs.org/docs/hooks-reference.html

uj5u.com熱心網友回復：

prevCount 是指count評估時的值。在實踐中，讓我們看一下您的示例的修改：

function TestCompononent() {
  const initialCount = 0;
  const [count, setCount] = useState(initialCount);

  function handleChange1() {
    setCount(count   1)
  }

  function handleChange2() {
    setCount(prevCount => prevCount   1)
  }

  function handleChange3() {
    setCount(count   1)
    setCount(count   1)
  }

  function handleChange4() {
    setCount(prevCount => prevCount   1)
    setCount(prevCount => prevCount   1)
  }

  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={handleChange1}>handleChange1</button>
      <button onClick={handleChange2}>handleChange2</button>
      <button onClick={handleChange3}>handleChange3</button>
      <button onClick={handleChange4}>handleChange4</button>
    </>
  );
}

好的，現在在這個例子中，handleChange1并且handleChange2行為相同，但handleChange3不是handleChange4。

讓我們想象一下，當我們呼叫時handleChange3，我們還沒有做任何其他事情，所以count等于0。

當我們打電話時，handleChange3我們正在做

setCout(count   1) // count === 0
setCout(count   1) // count === 0

這意味著在下一個渲染周期，count 將等于1

在同樣的場景中，如果我們handleChange4改為呼叫，我們會做

setCout((prevCount) => prevCount   1) // prevCount === 0
setCout((prevCoutn) => prevCount   1) // prevCount === 1

這意味著在下一個渲染周期，count 將等于2

希望這有助于說明正在發生的事情:)

uj5u.com熱心網友回復：

官方檔案包含一些資訊，因為您已將鏈接粘貼在那里

該函式將接收先前的值，并回傳一個更新的值

prevCount- 是一個functional范圍variable，使用回呼函式更新。您沒有定義這些變數，因為它們存在并在函式中消失并且沒有任何意義。一世

單擊將使用回呼使用先前的狀態更新狀態。prevCountis 是 count 的最新值。

uj5u.com熱心網友回復：

prevCount 它是在將新值設定為您的狀態之前您的狀態的當前值，因此如果狀態為 1 并單擊將 1 與舊值相加的按鈕，這意味著 old=>old 1 等于 1=>1 1 將回傳2

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441233.html

標籤：javascript 节点.js 反应反应钩子使用状态

上一篇：如何使用CSS向上影片svg高度？

下一篇：Node.js需要