React Hooks-使用useState与只是变量

Question

React Hooks给了我们useState选项，我总是看到Hooks与Class-State的比较。但是Hooks和一些常规变量呢？

例如，

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

我没有使用Hooks，它将为我带来以下结果：

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

那么区别是什么？在这种情况下，使用Hooks更加复杂...那为什么要开始使用它呢？

Answer 1

局部变量将在每次渲染时重置，而状态将更新：

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

Answer 2

原因是如果您重新useState渲染视图。变量本身仅会更改内存中的位，并且应用程序的状态可能与视图不同步。

比较以下示例：

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

在这两种情况下a，都只有在您useState正确使用视图时，单击的更改才会显示a的当前值。