docs(cn): Translate 'use memo' directive documentation to Chinese (#1827)

Author: loveloki

src/content/reference/react-compiler/directives/use-memo.md

@@ -1,29 +1,29 @@
 ---
 title: "use memo"
-titleForTitleTag: "'use memo' directive"
+titleForTitleTag: "'use memo' 指令"
 ---
 
 <Intro>
 
-`"use memo"` marks a function for React Compiler optimization.
+`"use memo"` 用于标记一个函数，以便 React 编译器对其进行优化。
 
 </Intro>
 
 <Note>
 
-In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+在大多数情况下，你并不需要使用 `"use memo"`。它主要用于 `annotation` 模式，在该模式下你必须显式地标记需要优化的函数。在 `infer` 模式下，编译器会根据命名约定（组件使用 PascalCase 命名法，Hooks 使用 use 前缀）自动检测组件和 hook。如果在 `infer` 模式下某个组件或 hook 没有被编译，你应该修正它的命名，而不是用 `"use memo"` 来强制编译。
 
 </Note>
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `"use memo"` {/*use-memo*/}
 
-Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization.
+在函数的开头添加 `"use memo"`，以此来标记该函数，使其可以被 React 编译器优化。
 
 ```js {1}
 function MyComponent() {
@@ -32,59 +32,59 @@ function MyComponent() {
 }
 ```
 
-When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.
+当一个函数包含 `"use memo"` 指令时，React 编译器将在构建时对其进行分析和优化。编译器会自动对值和组件进行记忆化，以防止不必要的重计算和重渲染。
 
-#### Caveats {/*caveats*/}
+#### 注意事项 {/*caveats*/}
 
-* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
-* The directive must be written with double or single quotes, not backticks.
-* The directive must exactly match `"use memo"`.
-* Only the first directive in a function is processed; additional directives are ignored.
-* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting.
+* `"use memo"` 必须位于函数体的最开始，在任何 import 语句或其他代码之前（注释除外）。
+* 该指令必须使用双引号或单引号，而不是反引号。
+* 该指令必须与 `"use memo"` 完全匹配。
+* 只有一个函数中的第一个指令会被处理；其余的指令将被忽略。
+* 指令的效果取决于你的 [`compilationMode`](/reference/react-compiler/compilationMode) 配置。
 
-### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/}
+### `"use memo"` 如何标记函数以进行优化 {/*how-use-memo-marks*/}
 
-In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it.
+在使用 React 编译器的应用中，所有函数都会在构建时被分析，以确定它们是否可以被优化。默认情况下，编译器会自动推断哪些组件需要被记忆化，但这取决于你所设置的 [`compilationMode`](/reference/react-compiler/compilationMode)。
 
-`"use memo"` explicitly marks a function for optimization, overriding the default behavior:
+`"use memo"` 可以显式地标记一个函数需要被优化，从而覆盖编译器的默认行为：
 
-* In `annotation` mode: Only functions with `"use memo"` are optimized
-* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization
-* In `all` mode: Everything is optimized by default, making `"use memo"` redundant
+* 在 `annotation` 模式下：只有带 `"use memo"` 的函数才会被优化
+* 在 `infer` 模式下：编译器使用启发式规则进行推断，但 `"use memo"` 会强制进行优化
+* 在 `all` 模式下：所有内容默认都会被优化，这使得 `"use memo"` 成为多余的
 
-The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.
+该指令在你的代码库中为优化和非优化的代码创建了一个清晰的界限，让你能对编译过程进行精细化控制。
 
-### When to use `"use memo"` {/*when-to-use*/}
+### 何时使用 `"use memo"` {/*when-to-use*/}
 
-You should consider using `"use memo"` when:
+你应该在以下情况考虑使用 `"use memo"`:
 
-#### You're using annotation mode {/*annotation-mode-use*/}
-In `compilationMode: 'annotation'`, the directive is required for any function you want optimized:
+#### 你使用 annotation 模式 {/*annotation-mode-use*/}
+当 `compilationMode: 'annotation'` 时，任何你希望被优化的函数都必须使用该指令：
 
 ```js
-// ✅ This component will be optimized
+// ✅ 这个组件将会被优化
 function OptimizedList() {
   "use memo";
   // ...
 }
 
-// ❌ This component won't be optimized
+// ❌ 这个组件不会被优化
 function SimpleWrapper() {
   // ...
 }
 ```
 
-#### You're gradually adopting React Compiler {/*gradual-adoption*/}
-Start with `annotation` mode and selectively optimize stable components:
+#### 你正在渐进式地引入 React 编译器 {/*gradual-adoption*/}
+可以从 `annotation` 模式开始，并有选择性地优化那些稳定的组件：
 
 ```js
-// Start by optimizing leaf components
+// 从优化叶子组件开始
 function Button({ onClick, children }) {
   "use memo";
   // ...
 }
 
-// Gradually move up the tree as you verify behavior
+// 在验证其行为后，逐步向组件树上层移动
 function ButtonGroup({ buttons }) {
   "use memo";
   // ...
@@ -93,65 +93,65 @@ function ButtonGroup({ buttons }) {
 
 ---
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
-### Working with different compilation modes {/*compilation-modes*/}
+### 在不同编译模式下的使用 {/*compilation-modes*/}
 
-The behavior of `"use memo"` changes based on your compiler configuration:
+`"use memo"` 的行为会根据你的编译器配置而改变：
 
 ```js
 // babel.config.js
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compilationMode: 'annotation' // or 'infer' or 'all'
+      compilationMode: 'annotation' // 或 'infer' 和 'all'
     }]
   ]
 };
 ```
 
-#### Annotation mode {/*annotation-mode-example*/}
+#### Annotation 模式 {/*annotation-mode-example*/}
 ```js
-// ✅ Optimized with "use memo"
+// ✅ 使用 "use memo" 进行优化
 function ProductCard({ product }) {
   "use memo";
   // ...
 }
 
-// ❌ Not optimized (no directive)
+// ❌ 未优化 (没有指令)
 function ProductList({ products }) {
   // ...
 }
 ```
 
-#### Infer mode (default) {/*infer-mode-example*/}
+#### Infer 模式（默认）{/*infer-mode-example*/}
 ```js
-// Automatically memoized because this is named like a Component
+// 会被自动记忆化，因为它的命名符合组件规范
 function ComplexDashboard({ data }) {
   // ...
 }
 
-// Skipped: Is not named like a Component
+// 会被跳过：因为它的命名不符合组件规范
 function simpleDisplay({ text }) {
   // ...
 }
 ```
 
-In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+在 `infer` 模式下，编译器会根据命名约定（组件使用 PascalCase 命名法，hook 使用 `use` 前缀）自动检测组件和 hook。如果在 `infer` 模式下某个组件或 hook 没有被编译，你应该修正它的命名，而不是用 `"use memo"` 来强制编译。
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## 故障排除 {/*troubleshooting*/}
 
-### Verifying optimization {/*verifying-optimization*/}
+### 验证优化效果 {/*verifying-optimization*/}
 
-To confirm your component is being optimized:
+要确认你的组件是否被成功优化，可以：
 
-1. Check the compiled output in your build
-2. Use React DevTools to check for Memo ✨ badge
+1. 检查你构建产物中被编译后的输出代码
+2. 使用 React 开发工具检查组件是否带有 Memo ✨ 徽章
 
-### See also {/*see-also*/}
+### 参见 {/*see-also*/}
 
-* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation
-* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior
-* [React Compiler](/learn/react-compiler) - Getting started guide
+* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - 选择退出编译
+* [`compilationMode`](/reference/react-compiler/compilationMode) - 配置编译行为
+* [React 编译器](/learn/react-compiler) - 入门指南