主要原因是因为与 Hooks 的调用顺序有关。
React 有一条“Hooks 调用顺序不变”的规则,为的是来保证组件的状态。
每当组件渲染的时候,Hooks 必须按照顺序调用。
如果将 Hook 放在 if
语句中,可能会导致调用顺序发生变化,从而打破这个规则。
错误示例:
if (flag) {useEffect(() => {}, []);}
正确操作:
useEffect(() => {if (flag) {}}, [flag]);
React中一定要确保 Hooks 的调用顺序始终一致,保证 React 的状态管理和副作用处理的正确!性。