function Counter() {
  const [count, setCount] = useState(0);      // Hook 1
  const [name, setName] = useState('');       // Hook 2
  const [flag, setFlag] = useState(false);    // Hook 3
  return <div>{count}</div>;
}

// 1. 无 deps：每次渲染后执行
useEffect(() => { console.log('每次渲染都执行'); });

// 2. 空 deps：仅首次
useEffect(() => {
  console.log('只执行一次');
  return () => console.log('卸载时执行');
}, []);

// 3. 有 deps：依赖变化时执行
useEffect(() => {
  console.log('count 或 name 变化时执行');
}, [count, name]);

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: '', age: 0 });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {/* 函数式更新，适合依赖前一个 state */}
      <button onClick={() => setCount(prev => prev + 1)}>+1 (函数式)</button>
    </div>
  );
}

const [state, setState] = useState(() => computeExpensiveInitialState());

function DataFetcher({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/users/${id}`, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(console.error);

    // 清理函数：组件卸载或 effect 重新执行前调用
    return () => controller.abort();
  }, [id]); // 依赖数组：id 变化时重新执行

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>聚焦</button>
    </>
  );
}

// 保存可变值，不触发重渲染
function Timer() {
  const countRef = useRef(0);
  countRef.current++; // 修改不会触发渲染
  return <div>Render count: {countRef.current}</div>;
}

function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 缓存函数，避免子组件因引用变化而重渲染
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  // 缓存计算结果
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(count);
  }, [count]);

  return <MemoChild onClick={handleClick} value={expensiveValue} />;
}

// ❌ 错误：条件调用
function Bad() {
  if (condition) {
    const [a, setA] = useState(0); // 破坏调用顺序！
  }
  const [b, setB] = useState(0);
}

// useLocalStorage - 同步 state 到 localStorage
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (e) {
      return initialValue;
    }
  });

  const setValue = useCallback((value) => {
    setStoredValue(prev => {
      const next = typeof value === 'function' ? value(prev) : value;
      window.localStorage.setItem(key, JSON.stringify(next));
      return next;
    });
  }, [key]);

  return [storedValue, setValue];
}

// 使用
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>;
}

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// 搜索防抖
function SearchInput() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 300);

  useEffect(() => {
    if (!debouncedSearch) return;
    fetchResults(debouncedSearch);
  }, [debouncedSearch]);
  // ...
}

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = useCallback((name) => (e) => {
    setValues(prev => ({ ...prev, [name]: e.target.value }));
  }, []);

  const validate = useCallback(() => {
    const newErrors = {};
    if (!values.email) newErrors.email = '必填';
    if (!values.password) newErrors.password = '必填';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [values]);

  const reset = useCallback(() => {
    setValues(initialValues);
    setErrors({});
  }, []);

  return { values, errors, handleChange, validate, reset };
}

// 登录表单
function LoginForm() {
  const { values, errors, handleChange, validate } = useForm({ email: '', password: '' });

  const onSubmit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    login(values);
  };

  return (
    <form onSubmit={onSubmit}>
      <input value={values.email} onChange={handleChange('email')} />
      {errors.email && <span>{errors.email}</span>}
      <input type="password" value={values.password} onChange={handleChange('password')} />
      {errors.password && <span>{errors.password}</span>}
      <button type="submit">登录</button>
    </form>
  );
}

function useInfiniteScroll(callback, hasMore, loading) {
  const observerRef = useRef();
  const lastElementRef = useCallback(node => {
    if (loading) return;
    if (observerRef.current) observerRef.current.disconnect();
    observerRef.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        callback();
      }
    });
    if (node) observerRef.current.observe(node);
  }, [loading, hasMore, callback]);

  return lastElementRef;
}

function InfiniteList() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const loadMore = useCallback(async () => {
    setLoading(true);
    const res = await fetchItems(page);
    setItems(prev => [...prev, ...res.data]);
    setHasMore(res.hasMore);
    setPage(p => p + 1);
    setLoading(false);
  }, [page]);

  const lastRef = useInfiniteScroll(loadMore, hasMore, loading);

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
      <li ref={lastRef} style={{ height: 1 }} />
    </ul>
  );
}

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    authApi.getCurrentUser()
      .then(setUser)
      .finally(() => setLoading(false));
  }, []);

  const hasPermission = useCallback((permission) => {
    return user?.permissions?.includes(permission);
  }, [user]);

  return { user, loading, hasPermission };
}

function ProtectedRoute({ permission, children }) {
  const { user, loading, hasPermission } = useAuth();

  if (loading) return <Spin />;
  if (!user) return <Navigate to="/login" />;
  if (permission && !hasPermission(permission)) return <Forbidden />;

  return children;
}

function VirtualList({ items, itemHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef();

  const visibleRange = useMemo(() => {
    const start = Math.floor(scrollTop / itemHeight);
    const end = start + Math.ceil(containerRef.current?.clientHeight / itemHeight) + 2;
    return [Math.max(0, start), Math.min(items.length, end)];
  }, [scrollTop, itemHeight, items.length]);

  const visibleItems = useMemo(() => {
    const [start, end] = visibleRange;
    return items.slice(start, end).map((item, i) => ({
      ...item,
      index: start + i,
    }));
  }, [items, visibleRange]);

  return (
    <div
      ref={containerRef}
      onScroll={e => setScrollTop(e.target.scrollTop)}
      style={{ height: '100%', overflow: 'auto' }}
    >
      <div style={{ height: items.length * itemHeight, position: 'relative' }}>
        {visibleItems.map(item => (
          <div key={item.id} style={{ position: 'absolute', top: item.index * itemHeight }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

// ❌ 错误：setTimeout 中拿到的是旧 count
function Bad() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // count 永远是 0
    }, 1000);
    return () => clearInterval(id);
  }, []); // 缺少 count 依赖
}

// ✅ 正确：使用函数式更新
function Good() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
}