React Hooks 执行时机测试

验证哪些 hooks 会在服务端执行，哪些只在客户端执行

服务端数据获取时间: 2025-12-17T09:54:09.789Z

✅ 这是一个服务端组件（page.tsx），可以在服务端获取数据，不能使用任何 React hooks

React Hooks 执行时机验证

当前状态: ⏳ 渲染中...

这是一个客户端组件（有 'use client'），会先在服务端渲染（SSR），然后在客户端 Hydration

📝 查看验证日志

  1. 终端（运行 pnpm dev 的窗口）查看服务端日志，会显示 [SERVER]
  2. 浏览器控制台（F12）查看客户端日志，会显示 [CLIENT] 和 [CLIENT ONLY]
  3. 刷新页面，对比两个地方的日志输出

✅ 服务端会执行

  • • useState（初始化函数）
  • • useReducer（初始化函数）
  • • useMemo（计算函数）
  • • useCallback（创建函数引用）
  • • useContext
  • • useRef

⚠️ 不能直接访问 window、document 等浏览器 API

💡 useCallback 创建的函数只有在调用时才会执行内部代码

🔵 只在客户端执行

  • • useEffect（回调函数）
  • • useLayoutEffect（回调函数）

✅ 可以安全访问浏览器 API

测试按钮

useMemo 计算结果: 0

点击按钮，useCallback 创建的函数会在客户端执行，查看控制台日志

服务端组件示例

这是一个服务端组件（没有 'use client' 指令）

服务端组件在服务端渲染，不能使用任何 React hooks

⚠️ 如果需要在服务端组件中使用浏览器 API，应该将其移到客户端组件中