使用状态钩子，设置状态函数.访问以前的状态值

Question

这两个是等价的吗？如果不是，哪个是最好的，为什么？

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(count + 1)}>+</button>

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>

Answer 1

如果下一个状态值依赖于前一个值，如本增量按钮示例所示，最好使用 setState 的功能版本 ( setCount(prevCount => prevCount + 1) (。

如果要将 setter 函数传递到回调函数(如 onChange 或 HTTP 请求响应处理程序(中，则可能会遇到错误。

作为明确的例子，在下面的页面中，如果单击"延迟计数器(基本("，然后单击"即时计数器"，则计数只会增加1。但是，如果您单击"延迟计数器(功能("，然后单击"即时计数器"，则计数最终将增加 2。

import React, { useState } from "react";
import ReactDOM from "react-dom";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setTimeout(() => setCount(count + 1), 2000)}>
        Delayed Counter (basic)
      </button>
      <button onClick={() => setTimeout(() => setCount(x => x + 1), 2000)}>
        Delayed Counter (functional)
      </button>
      <button onClick={() => setCount(count + 1)}>Immediate Counter</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);