React Server Components 里怎么用 useState？

程序员梓艺提问于 2026-02-26 23:12:22 阅读 21

框架

我在 Next.js 13 的 app 目录下写了个组件，想用 useState 管理状态，结果一保存就报错说不能在 Server Component 里用 Hook。但我这个组件明明需要交互啊，难道所有带状态的都得改成 Client Component？

我试过加 "use client" 到文件顶部，但又担心性能变差，毕竟文档说 Server Components 更快。有没有办法在保留 Server Component 的同时处理简单状态？

我来解答赞 3 收藏

反馈

1 条解答

景鑫 Dev Lv1

我之前也遇到过，React Server Component 里确实不能用 useState，这是设计决定的，不是 bug。
要么把组件改成 Client Component（加 "use client"），要么把状态提到上层 Client Component 里用 props 传下来，没第三条路。

简单交互就直接加 "use client"，别怕性能——现代 SSR 框架早优化好了，比你硬绕弯子强。

"use client"



import { useState } from 'react'



export default function Counter() {

  const [count, setCount] = useState(0)

  return (

    

  )

}

2026-02-26 23:26