react 不允许条件调用 hook，因其会破坏 hook 的调用顺序与状态映射机制；正确做法是始终无条件调用所有 hook，再通过逻辑判断选择返回值。
react 不允许条件调用 hook，因其会破坏 hook 的调用顺序与状态映射机制；正确做法是始终无条件调用所有 hook，再通过逻辑判断选择返回值。
在 React 开发中，一个常见误区是试图根据 props 或 state 动态决定是否执行某个 Hook，例如：
// ❌ 错误：条件调用 Hook —— 违反 Rules of Hooks const [value, setValue] = localStorage ? useLocalStorage() : useQuery();
这种写法会导致组件在不同渲染中调用 Hook 的数量或顺序不一致，从而引发难以调试的 bug（如状态丢失、值错位、React.useState 返回旧值等），React 会在开发模式下抛出明确警告：“React Hook ‘xxx’ is called conditionally”。
✅ 正确解法：始终无条件调用所有相关 Hook，再对返回值做条件选择
function MyComponent({ localStorage }: { localStorage: boolean }) {
// ✅ 正确：无论条件如何，两个 Hook 都被调用
const localStorageOutput = useLocalStorage();
const queryOutput = useQuery();
// ✅ 安全地从已计算的值中选择
const [value, setValue] = localStorage ? localStorageOutput : queryOutput;
return <div>{String(value)}</div>;
}
⚠️ 注意事项：
-
useLocalStorage和useQuery仍会在每次渲染中执行（包括副作用，如读取 localStorage、发起网络请求），因此需确保它们自身具备内部条件控制（例如useQuery可通过enabled: localStorage === false配置跳过请求）； - 若
localStorageprop 在运行时频繁切换，建议进一步封装为统一 Hook，避免重复逻辑与潜在竞态问题：
function useData({ localStorage }: { localStorage: boolean }) {
const local = useLocalStorage();
const query = useQuery({ enabled: !localStorage });
return localStorage ? local : query;
}
? 总结：Hook 的调用必须严格遵循「静态顺序」原则 —— 所有 Hook 必须位于顶层作用域，且调用顺序在任意渲染中保持完全一致。条件逻辑应作用于 Hook 的返回值，而非 Hook 本身。这是保证 React 状态一致性与可预测性的底层基石。
