React Hooks-使用useState与只是变量

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更加复杂...那为什么要开始使用它呢？

原因是如果您重新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的当前值。

更新状态将使该组件再次重​​新渲染，但本地值不会。

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

因此，使用它会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>;
}

您的第一个示例仅能工作，因为数据本质上永远不会改变。使用的输入点setState是在状态挂起时重新渲染整个组件。因此，如果您的示例需要某种状态更改或管理，您将很快意识到更改值是必需的，并且要使用变量值更新视图，则需要状态并重新呈现。

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 })并触发重新渲染。

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

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