React使用useState和只使用变量
React使用useState和只使用变量
提问于 2019-10-05 21:25:27
React给了我们useState选项，我总是看到钩子和类状态比较。但是钩子和一些常规变量呢？
例如,
function Foo() {
let a = 0;
a = 1;
return <div>{a}</div>;
}我没有使用钩子，它会给我同样的结果：
function Foo() {
const [a, setA] = useState(0);
if (a != 1) setA(1); // to avoid infinite-loop
return <div>{a}</div>;
}那么区别是什么呢？对那个case...So使用钩子更复杂，为什么要开始使用它呢？
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-10-05 21:31:42
原因是，如果您的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的当前值。
Stack Overflow用户
发布于 2019-10-05 21:37:46
局部变量将在每次突变时重置呈现，而状态将更新：
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>
);
}
Stack Overflow用户
发布于 2019-10-05 21:35:44
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返回的内容有两件事：
用于该变量的新状态variable
- setter
如果您调用setA(1)，您将调用this.setState({ a: 1 })并触发重呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58252454
复制相关文章
相似问题
腾讯云开发者
