use client

'use client' 指令声明了组件在客户端渲染的入口点，适用于需要客户端 JavaScript 功能的交互式用户界面 (UI)，例如状态管理、事件处理以及访问浏览器 API。这是 React 的一项特性。

须知：

您无需在每个包含客户端组件 (Client Components) 的文件中都添加 'use client' 指令。只需在那些您希望直接在服务端组件 (Server Components) 中渲染的组件文件顶部添加即可。'use client' 指令定义了客户端与服务端的边界，从该文件导出的组件将作为客户端的入口点。

用法

要为客户端组件声明入口点，请在文件顶部、所有导入语句之前添加 'use client' 指令：

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

使用 'use client' 指令时，客户端组件的 props 必须是可序列化的。这意味着 props 需要采用 React 在从服务端向客户端发送数据时能够序列化的格式。

'use client'

export default function Counter({
  onClick /* ❌ 函数不可序列化 */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

在服务端组件中嵌套客户端组件

结合使用服务端组件和客户端组件，您可以构建既高效又交互性强的应用：

服务端组件：用于静态内容、数据获取和 SEO 友好元素
客户端组件：用于需要状态、副作用或浏览器 API 的交互元素
组件组合：根据需要将客户端组件嵌套在服务端组件中，实现服务端与客户端逻辑的清晰分离

以下示例中：

Header 是处理静态内容的服务端组件
Counter 是使页面具有交互功能的客户端组件

import Header from './header'
import Counter from './counter' // 这是一个客户端组件

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

参考

更多关于 'use client' 的信息，请参阅 React 官方文档。

用法

在服务端组件中嵌套客户端组件

参考

On this page