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的当前值。
局部变量将在每次渲染时重置，而状态将更新：
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>
);
}
更新状态将使组件再次重新渲染，但本地值不会。
在您的情况下，您在组件中呈现了该值。这意味着，当值改变时，组件应该重新渲染以显示更新的值。
所以使用会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>;
}
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回报是两件事情：
如果你打电话，setA(1)你会打电话this.setState({ a: 1 })并触发重新渲染。
您的第一个示例之所以有效，是因为数据基本上永远不会改变。使用的要点setState是在状态挂起时重新渲染整个组件。因此，如果您的示例需要某种状态更改或管理，您将很快意识到更改值是必要的，并且要使用变量值更新视图，您将需要状态和重新渲染。