From 87bbf4662a346383044f1ec68b81d9011db28127 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Fri, 19 Sep 2025 14:13:08 +0800 Subject: [PATCH 1/7] docs: add translate in memo.md [translate part link](https://zh-hans.react.dev/reference/react/memo) --- src/content/reference/react/memo.md | 41 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index ad62988ce7..ce1b67e5f8 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` anymore。编译器会为你自动优化组件的重新渲染。 -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,21 @@ function Parent() { } else { t3 = $[4]; } - // ... return statement ... + // ... 返回语句 ... } ``` +Since the name prop is always "John" +注意这些高亮行: 编译器会包裹 `` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次，并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时，防止其重新渲染。 -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. - -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 - -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 会自动： +1. 追踪传给 `ExpensiveChild` 的 `name` 有无变化 +2. 为 `` 重用先前创建的 JSX +3. 完全跳过 `ExpensiveChild` 的重新渲染 +This means **在使用 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`。 From 21d66ef13342c99ff30162bdb60825c9f7101fe4 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Fri, 19 Sep 2025 14:17:19 +0800 Subject: [PATCH 2/7] docs: add translate in memo.md --- src/content/reference/react/memo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index ce1b67e5f8..122c2166bc 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) 会自动为所有组件应用与 memo 等价的优化，从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。 +[React Compiler](/learn/react-compiler) 会自动为所有组件应用与 `memo` 等价的优化，从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。 From 1d79d19ca5196675cceb685a955aa3e2b9eb11f2 Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 24 Sep 2025 10:01:46 +0800 Subject: [PATCH 3/7] Update src/content/reference/react/memo.md --- src/content/reference/react/memo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 122c2166bc..5312a1d6ff 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -365,7 +365,7 @@ function arePropsEqual(oldProps, newProps) { ### 使用 React Compiler 时我还需要 React.memo 吗？ {/*react-compiler-memo*/} -当你启用 [React Compiler](/learn/react-compiler)，通常不再需要 `React.memo` anymore。编译器会为你自动优化组件的重新渲染。 +当你启用 [React Compiler](/learn/react-compiler) 后，通常不再需要 `React.memo` 了。编译器会为你自动优化组件的重新渲染。 其工作方式如下： From fd32a3afff52a0c151805b92658e903ee77f9565 Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 24 Sep 2025 10:05:56 +0800 Subject: [PATCH 4/7] Update src/content/reference/react/memo.md --- src/content/reference/react/memo.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 5312a1d6ff..2aa173ae89 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -426,7 +426,6 @@ function Parent() { // ... 返回语句 ... } ``` -Since the name prop is always "John" 注意这些高亮行: 编译器会包裹 `` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次，并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时，防止其重新渲染。 React Compiler 会自动： From 4aec12cc3cfef373d5152b69fb040ed2ee6bc95a Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 24 Sep 2025 10:06:16 +0800 Subject: [PATCH 5/7] Update src/content/reference/react/memo.md --- src/content/reference/react/memo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 2aa173ae89..3859cb4127 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -433,7 +433,7 @@ React Compiler 会自动： 2. 为 `` 重用先前创建的 JSX 3. 完全跳过 `ExpensiveChild` 的重新渲染 -This means **在使用 React Compiler 时，你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化，让代码更简洁更易维护。 +这意味着 **在使用 React Compiler 时，你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化，让代码更简洁更易维护。 编译器的优化实际上比 `React.memo` 更全面。 它也会记忆化组件内部的中间值和昂贵计算，类似在整个组件树中结合使用 `React.memo` 和 `useMemo`。 From acafb732324e712b43154edc43eb1b7f05f9fe0a Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 24 Sep 2025 10:06:38 +0800 Subject: [PATCH 6/7] Update src/content/reference/react/memo.md --- src/content/reference/react/memo.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 3859cb4127..9cc1a28ee0 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -426,6 +426,7 @@ function Parent() { // ... 返回语句 ... } ``` + 注意这些高亮行: 编译器会包裹 `` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次，并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时，防止其重新渲染。 React Compiler 会自动： From d403360291782e2f5b12e398e1c838d12156f42a Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 24 Sep 2025 10:07:27 +0800 Subject: [PATCH 7/7] Update src/content/reference/react/memo.md --- src/content/reference/react/memo.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 9cc1a28ee0..8bcd1d0b29 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -435,6 +435,7 @@ React Compiler 会自动： 3. 完全跳过 `ExpensiveChild` 的重新渲染 这意味着 **在使用 React Compiler 时，你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化，让代码更简洁更易维护。 + 编译器的优化实际上比 `React.memo` 更全面。 它也会记忆化组件内部的中间值和昂贵计算，类似在整个组件树中结合使用 `React.memo` 和 `useMemo`。