'use client' 指令声明了在客户端渲染组件的入口点，应在创建需要客户端 JavaScript 能力的交互式用户界面 (UI) 时使用，例如状态管理、事件处理和访问浏览器 API。这是 React 的一个特性。
须知：
您无需将
'use client'指令添加到每个包含客户端组件的文件中。您只需将其添加到那些您希望直接在服务端组件中渲染其组件的文件中。'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'
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 /* ❌ Function is not serializable */,
}) {
return (
<div>
<button onClick={onClick}>Increment</button>
</div>
)
}'use client'
export default function Counter({
onClick /* ❌ Function is not serializable */,
}) {
return (
<div>
<button onClick={onClick}>Increment</button>
</div>
)
}结合服务端组件和客户端组件可以帮助您构建既高性能又具有交互性的应用程序：
在以下示例中：
Header 是一个处理静态内容的服务端组件。Counter 是一个在页面内实现交互功能的客户端组件。import Header from './header'
import Counter from './counter' // This is a Client Component
export default function Page() {
return (
<div>
<Header />
<Counter />
</div>
)
}import Header from './header'
import Counter from './counter' // This is a Client Component
export default function Page() {
return (
<div>
<Header />
<Counter />
</div>
)
}有关 'use client' 的更多信息，请参阅 React 文档。