useState 钩子，setState 函数。访问先前的状态值答案

【问题标题】：useState hook, setState function. Accessing previous state valueuseState 钩子，setState 函数。访问先前的状态值
【发布时间】：2019-10-17 16:16:25
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

如果下一个状态值依赖于前一个值，如本例中的增量按钮，最好使用the functional version of setState (setCount(prevCount => prevCount + 1))。

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

作为一个明确的示例，in the below page，如果单击“延迟计数器（基本）”，然后单击“立即计数器”，则计数只会增加 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);

【讨论】：

据我了解，发生这种情况的原因是，“基本”计数器在被调用时将“count”的值保存在内存中，并使用相同的值，无论它是否已更改在此期间与否。也许这对某人有帮助；）

【解决方案2】：

这两个示例都是有效的并且工作方式相同。但是，我怀疑primitive 与function 的操作相同，因为JavaScript 支持first-class/higher order functions。这意味着函数像任何其他变量一样受到威胁，允许将它们作为参数传递，将它们分配给变量，并在任何其他函数中返回它们。

【讨论】：