javascript - 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

原因是如果您 useState 它会重新呈现 View 。变量本身只会更改内存中的位，您的应用程序的状态可能会与 View 不同步。

比较这个例子:

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 时， View 才能正确显示 a 的当前值。