docs(cn): translate reference/react/use-client into Chinese

src/content/reference/react/use-client.md

@@ -4,26 +4,26 @@ title: "'use client'"
 
 <Note>
 
-These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+这些指令仅在你 [使用 React 服务器组件](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 或构建可适配库时需要。
 
 </Note>
 
 
 <Intro>
 
-`'use client'` marks source files whose components execute on the client.
+`'use client'` 标记组件在客户端上执行的源文件。
 
 </Intro>
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `'use client'` {/*use-client*/}
 
-Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported.
+在文件的最顶部添加 `'use client'` 以标记该文件（包括它使用的任何子组件）在客户端上执行，而无论其导入位置如何。
 
 ```js
 'use client';
@@ -34,24 +34,24 @@ export default function RichTextEditor(props) {
   // ...
 ```
 
-When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState).
+当从服务器组件导入标记为 `'use client'` 的文件时，[兼容的捆绑器（bundler）](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 会将导入视为服务器代码与客户端代码之间的“分界点”。模块图中该点或以下的组件可以使用如 [`useState`](/reference/react/useState) 的仅限客户端的 React 功能。
 
-#### Caveats {/*caveats*/}
+#### 注意 {/*caveats*/}
 
-* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props.
-* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception.
-* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components.
-* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components.
-* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary.
-* Components like a `<MarkdownRenderer>` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component.
-* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server.
-* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database.
-* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+* 不必在每个使用仅客户端 React 功能的文件中都添加`'use client'`，只需在从服务器组件文件中导入的文件中添加。`'use client'` 表示服务器代码和客户端代码之间的边界；树中更深层次的任何组件将自动在客户端上执行。为了从服务器组件渲染，从`'use client'` 文件导出的组件必须具有可序列化的 props。
+* 当从服务器文件导入 `'use client'` 文件时，导入的值可以渲染为 React 组件或通过 props 传递到客户端组件。任何其他使用都会引发异常。
+* 当从另一个客户端文件导入 `'use client'` 文件时，该指令无效。这允许你编写可同时在服务器和客户端组件中使用的仅客户端组件。
+* `'use client'` 文件中的所有代码以及它直接或间接导入的任何模块都将成为客户端模块图的一部分，并且必须发送到客户端并由客户端执行，以便由客户端渲染至浏览器。为了减少客户端包的大小并充分利用服务器，请尽可能将状态 state（和 `'use client'` 指令）移动到组件树的较低位置，并将渲染的服务器组件 [作为客户端组件的子组件](/learn/passing-props- to-a-component#passing-jsx-as-children)。
+* 由于 props 是跨服务器客户端边界进行序列化的，因此这些指令的放置位置可能会影响发送到客户端的数据量；尽量仅使用必要的数据结构。
+* 像 `<MarkdownRenderer>` 这样既不使用服务器功能也不使用客户端功能的组件通常不应标记为 `'use client'`。这样当在服务器组件中使用时，它们可以专门在服务器上渲染；但当在客户端组件中使用时，它们将被添加到客户端包中。
+* 发布到 npm 的库应该在导出的 React 组件上包含 `'use client'`，这些组件可以仅使用客户端 React 功能的可序列化 props 进行渲染，以允许服务器组件导入和渲染这些组件。否则，用户将需要将库组件包装在自己的 `'use client'` 文件中，这可能很麻烦，并且会阻止库稍后将逻辑移动到服务器。将预捆绑文件发布到 npm 时，请确保 `'use client'` 源文件最终位于标有 `'use client'` 的捆绑包中，与包含可直接在服务器上使用的导出的任何捆绑包分开。
+* 客户端组件仍将作为服务器渲染 (SSR) 或构建时（build-time）静态站点生成 (SSG) 的一部分运行，它们充当客户端，将 React 组件的初始渲染输出转换为可在下载 JavaScript 包之前渲染的 HTML。但他们无法使用服务器功能，例如直接从数据库读取数据。
+* 像 `'use client'` 这样的指令必须位于文件的最开头，位于任何导入或其他代码之上（指令上方可以存在注释）。它们必须用单引号或双引号编写，而不是反引号。`'use xyz'` 指令格式类似于 `'useXyz'` Hook 命名约定，但相似之处纯属巧合。
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
 <Wip>
 
-This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
+此章节仍在完善中，更多内容请参见 [Next.js 文档中关于服务器组件的部分](https://beta.nextjs.org/docs/rendering/server-and-client-components)。
 
 </Wip>