Skip to content

Commit 6f1f66f

Browse files
authored
docs: add translate in memo.md (#1792)
2 parents 82a4be1 + d403360 commit 6f1f66f

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

src/content/reference/react/memo.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
1414

1515
<Note>
1616

17-
[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.
17+
[React Compiler](/learn/react-compiler) 会自动为所有组件应用与 `memo` 等价的优化,从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。
1818

1919
</Note>
2020

@@ -363,16 +363,16 @@ function arePropsEqual(oldProps, newProps) {
363363

364364
---
365365

366-
### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
366+
### 使用 React Compiler 时我还需要 React.memo 吗? {/*react-compiler-memo*/}
367367

368-
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.
368+
当你启用 [React Compiler](/learn/react-compiler) 后,通常不再需要 `React.memo` 了。编译器会为你自动优化组件的重新渲染。
369369

370-
Here's how it works:
370+
其工作方式如下:
371371

372-
**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
372+
**未启用 React Compiler** 时,你需要 `React.memo` 来避免不必要的重新渲染:
373373

374374
```js
375-
// Parent re-renders every second
375+
// 父级每秒重新渲染一次
376376
function Parent() {
377377
const [seconds, setSeconds] = useState(0);
378378

@@ -391,30 +391,30 @@ function Parent() {
391391
);
392392
}
393393

394-
// Without memo, this re-renders every second even though props don't change
394+
// 没有 memo,即使 props 没有变化,每秒也会重新渲染一次
395395
const ExpensiveChild = memo(function ExpensiveChild({ name }) {
396396
console.log('ExpensiveChild rendered');
397397
return <div>Hello, {name}!</div>;
398398
});
399399
```
400400

401-
**With React Compiler enabled**, the same optimization happens automatically:
401+
**启用 React Compiler** 后,相同的优化会自动发生:
402402

403403
```js
404-
// No memo needed - compiler prevents re-renders automatically
404+
// 无需 memo - 编译器会自动阻止重新渲染
405405
function ExpensiveChild({ name }) {
406406
console.log('ExpensiveChild rendered');
407407
return <div>Hello, {name}!</div>;
408408
}
409409
```
410410

411-
Here's the key part of what the React Compiler generates:
411+
下面是 React Compiler 生成代码的关键部分:
412412

413413
```js {6-12}
414414
function Parent() {
415415
const $ = _c(7);
416416
const [seconds, setSeconds] = useState(0);
417-
// ... other code ...
417+
// ... 其他代码 ...
418418

419419
let t3;
420420
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
@@ -423,22 +423,22 @@ function Parent() {
423423
} else {
424424
t3 = $[4];
425425
}
426-
// ... return statement ...
426+
// ... 返回语句 ...
427427
}
428428
```
429429

430-
Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` 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.
430+
注意这些高亮行: 编译器会包裹 `<ExpensiveChild name="John" />` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次,并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时,防止其重新渲染。
431431

432-
The React Compiler automatically:
433-
1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
434-
2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
435-
3. Skips re-rendering `ExpensiveChild` entirely
432+
React Compiler 会自动:
433+
1. 追踪传给 `ExpensiveChild``name` 有无变化
434+
2. `<ExpensiveChild name="John" />` 重用先前创建的 JSX
435+
3. 完全跳过 `ExpensiveChild` 的重新渲染
436436

437-
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.
437+
这意味着 **在使用 React Compiler 时,你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化,让代码更简洁更易维护。
438438

439439
<Note>
440440

441-
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.
441+
编译器的优化实际上比 `React.memo` 更全面。 它也会记忆化组件内部的中间值和昂贵计算,类似在整个组件树中结合使用 `React.memo` `useMemo`
442442

443443
</Note>
444444

0 commit comments

Comments
 (0)