function foo1() {
return {
bar: "hello"
};
}
function foo2() {
return {
bar: "hello";
}
}
有两个函数“foo1”和“foo2”,可能的输出是什么以及这些函数之间的主要区别是什么。
最佳答案
前言:如图所示,两者都会导致无限重新渲染。 setState
调用应该只对发生的其他事情使用react。
setState(state + 1)
使用 state
的范围内值(可能已过时),加一,并将其设置为新值。如果 state
已过时(实际状态值已同时更新),则会覆盖之前的更新。
setState(state => state + 1)
要求 setState
使用保证最新版本的 state
回调它>,加一,然后将其设置为值。
在适当的情况下,这两种方式都可以,但在根据现有状态更新状态时,通常您需要第二种(回调)形式,而不是第一种形式。
更多 here在 React 文档中。
这是一个人为的示例,演示了使用过时的 state1
值的差异:
const {useState, useEffect} = React;
const Example = () => {
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// THIS IS INCORRECT (for this situation), it uses a stale value
// of `state1`
setState1(state1 + 1);
// This is correct (for this situation)
setState2(state2 => state2 + 1);
}, 500);
return () => {
clearInterval(timer);
};
}, []);
return <div>
<div>state1 = {state1}</div>
<div>state2 = {state2}</div>
</div>;
};
ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
有一些工具(例如带有适当插件的 ESLint)会在某些情况下警告您使用过时的状态变量;例如,ESLint 的 exhaustive-deps
规则来自 eslint-plugin-react-hooks
会发出上面的警告,指出 useEffect
依赖项数组中缺少 state1
。
关于javascript - 这两个函数 'foo1' 和 'foo2' 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69836815/