升级至Next.js 13：求React客户端专属特性完整列表及相关疑问
2026-7-10
需要声明
'use client'的React特性完整列表 以下是所有需要在Next.js 13+中声明'use client'的React特性及场景：
- 状态管理类 Hooks
useState、useReducer：任何涉及组件内部状态更新的逻辑都依赖客户端环境
- 生命周期与副作用类 Hooks
useEffect、useLayoutEffect：处理组件挂载、更新、卸载阶段的副作用，只能在客户端执行
- 上下文相关 API
useContext：访问React Context的值必须在客户端组件中；createContext本身无需标记，但使用useContext的组件需要
- DOM 交互与 Ref 相关 Hooks
useRef、useImperativeHandle：操作DOM元素或组件实例引用的逻辑只能在客户端运行
- 事件处理
- 所有绑定到DOM元素的事件处理函数（如
onClick、onChange）所在的组件，必须声明'use client'——因为浏览器事件仅能在客户端触发
- 所有绑定到DOM元素的事件处理函数（如
- 客户端特有依赖
- 直接调用浏览器API（如
window、document、localStorage）的组件 - 使用第三方客户端库（如React Query/SWR的客户端hooks、带交互的UI组件库）的组件
- 直接调用浏览器API（如
- 其他客户端专属 Hooks
useCallback、useMemo：若依赖了客户端状态或API，所在组件需要标记；纯计算场景若不关联客户端特性可例外，但通常和其他客户端hooks共存时需要useTransition、useDeferredValue：用于优化客户端交互体验的hooks，仅能在客户端组件中使用useId：虽服务端可生成ID，但结合客户端交互（如表单label与input关联）时，组件需标记为客户端
提示：只要组件中使用了上述任意一种特性，就需要在文件顶部添加
'use client'指令，它会将整个组件及其未单独声明指令的子组件标记为客户端组件。
内容的提问来源于stack exchange，提问作者Blake Plumb
相关产品推荐
相关产品推荐
