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

如果下一个状态值取决于上一个值，例如在此增量按钮示例中，最好使用the functional version of setState（setCount(prevCount => prevCount + 1)）。

如果将setter函数传递给回调函数（例如onChange或HTTP Request响应处理程序），则可能会出错。

作为一个明确的示例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);

Answer 2

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

useState钩子，setState函数。访问以前的状态值

2 个答案: