diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index ad62988ce7..8bcd1d0b29 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -14,7 +14,7 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
-[React Compiler](/learn/react-compiler) automatically applies the equivalent of `memo` to all components, reducing the need for manual memoization. You can use the compiler to handle component memoization automatically.
+[React Compiler](/learn/react-compiler) 会自动为所有组件应用与 `memo` 等价的优化,从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。
@@ -363,16 +363,16 @@ function arePropsEqual(oldProps, newProps) {
---
-### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
+### 使用 React Compiler 时我还需要 React.memo 吗? {/*react-compiler-memo*/}
-When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
+当你启用 [React Compiler](/learn/react-compiler) 后,通常不再需要 `React.memo` 了。编译器会为你自动优化组件的重新渲染。
-Here's how it works:
+其工作方式如下:
-**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
+在 **未启用 React Compiler** 时,你需要 `React.memo` 来避免不必要的重新渲染:
```js
-// Parent re-renders every second
+// 父级每秒重新渲染一次
function Parent() {
const [seconds, setSeconds] = useState(0);
@@ -391,30 +391,30 @@ function Parent() {
);
}
-// Without memo, this re-renders every second even though props don't change
+// 没有 memo,即使 props 没有变化,每秒也会重新渲染一次
const ExpensiveChild = memo(function ExpensiveChild({ name }) {
console.log('ExpensiveChild rendered');
return
Hello, {name}!
;
});
```
-**With React Compiler enabled**, the same optimization happens automatically:
+**启用 React Compiler** 后,相同的优化会自动发生:
```js
-// No memo needed - compiler prevents re-renders automatically
+// 无需 memo - 编译器会自动阻止重新渲染
function ExpensiveChild({ name }) {
console.log('ExpensiveChild rendered');
return Hello, {name}!
;
}
```
-Here's the key part of what the React Compiler generates:
+下面是 React Compiler 生成代码的关键部分:
```js {6-12}
function Parent() {
const $ = _c(7);
const [seconds, setSeconds] = useState(0);
- // ... other code ...
+ // ... 其他代码 ...
let t3;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
@@ -423,22 +423,22 @@ function Parent() {
} else {
t3 = $[4];
}
- // ... return statement ...
+ // ... 返回语句 ...
}
```
-Notice the highlighted lines: The compiler wraps `` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
+注意这些高亮行: 编译器会包裹 `` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次,并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时,防止其重新渲染。
-The React Compiler automatically:
-1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
-2. Reuses the previously created JSX for ``
-3. Skips re-rendering `ExpensiveChild` entirely
+React Compiler 会自动:
+1. 追踪传给 `ExpensiveChild` 的 `name` 有无变化
+2. 为 `` 重用先前创建的 JSX
+3. 完全跳过 `ExpensiveChild` 的重新渲染
-This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
+这意味着 **在使用 React Compiler 时,你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化,让代码更简洁更易维护。
-The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree.
+编译器的优化实际上比 `React.memo` 更全面。 它也会记忆化组件内部的中间值和昂贵计算,类似在整个组件树中结合使用 `React.memo` 和 `useMemo`。