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 它会重新渲染视图。变量本身只会改变内存中的位，并且您的应用程序的状态可能与视图不同步。

比较这个例子：

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 的当前值。

Answer 2

您的第一个示例之所以有效，是因为数据基本上永远不会改变。使用setState 的切入点是在状态挂起时重新渲染整个组件。因此，如果您的示例需要某种状态更改或管理，您将很快意识到更改值是必要的，并且要使用变量值更新视图，您将需要状态和重新渲染。

Answer 3

更新状态会使组件重新渲染，但局部值不会。

在您的情况下，您在组件中呈现了该值。 这意味着，当值更改时，组件应该重新渲染以显示更新后的值。

所以使用useState会比正常的本地值更好。

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 4

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

等价于

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

useState 返回的是两件事：

1. 新的状态变量
2. 该变量的设置器

如果您调用setA(1)，您将调用this.setState({ a: 1 }) 并触发重新渲染。

Answer 5

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

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>
  );
}