React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies. (react-hooks/exhaustive-deps)
export default function App() {
const [state, setState]= useState(true);
useEffect(() => {
console.log("Hello Word");
// setState(!state); if you mutate state here, it will cause an infinite loop of renders
},[state]);
return (
<div>
<button onClick = {()=>setState(!state)}>Toggle State</button>
</div>
);
}
2条答案
按热度按时间qhhrdooz1#
如果你创建了一个
useEffect
,没有第二个参数,或者有一个等于undefined
或null
的参数,那么回调函数会在每个渲染器上执行。如果你显式输入了undefined
或null
作为第二个参数,并且你的编辑器中有Eslint,你会收到这样的警告:在下面这种情况下,您不会对应用程序造成任何损害,在这种情况下,您不会在回调中修改
state
,它只会在每次呈现时记录“Hello Word”。在回调函数中修改
state
的情况下,会导致渲染的无限循环。这是因为状态改变会触发渲染,并且回调函数会在每个渲染上执行。为了涵盖所有用例,第二个参数为空的dependencies数组,其中回调只在第一次渲染时执行:
最后,在第一次渲染时以及每次dependencies数组中的某个
state
发生更改时调用回调的函数:yvt65v4c2#
如果deps未定义或为空,它将重新渲染每个圆。
在React源代码中,当第二个参数未定义时,deps将为
null
,updateEffectImpl将始终执行pushEffect,并渲染每个圆: