当我使用我自己的样式化组件库时，出现无效的钩子调用错误

// 错误的示例
function MyComponent({ condition }) {
  if (condition) {
    useEffect(() => { /* ... */ }); // 错误！Hooks不能在条件语句中调用
  }
}

// 正确的示例
function MyComponent({ condition }) {
  useEffect(() => {
    if (condition) {
      // ...
    }
  }, [condition]); // 正确！Hooks在顶层调用
}

// 错误的示例
function MyComponent() {
  if (someCondition) {
    useEffect(() => { /* ... */ });
  } else {
    useState(); // 错误！Hooks调用顺序不一致
  }
}

// 正确的示例
function MyComponent() {
  const [state, setState] = useState();
  useEffect(() => {
    if (someCondition) {
      // ...
    }
  }, [someCondition]);
}

// 自定义Hook示例
function useCustomHook() {
  useEffect(() => {
    // ...
  }, []);
  return someValue;
}

function MyComponent() {
  const value = useCustomHook(); // 正确使用自定义Hook
}