use client

use client 指令用于将组件指定为在客户端渲染，当创建需要客户端 JavaScript 功能（如状态管理、事件处理和访问浏览器 API）的交互式用户界面 (UI) 时应该使用它。这是一个 React 特性。

用法

要将组件指定为客户端组件，请在文件的顶部、所有导入语句之前添加 use client 指令：

app/components/counter.tsx

TypeScript

'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>
  )
}

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

组合使用服务器组件和客户端组件可以让你构建既高性能又具有交互性的应用：

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

在下面的示例中：

Header 是一个处理静态内容的服务器组件。
Counter 是一个在页面中启用交互功能的客户端组件。

app/page.tsx

TypeScript

import Header from './header'
import Counter from './counter' // 这是一个客户端组件
 
export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

参考

有关 use client 的更多信息，请参阅 React 文档。