File tree Expand file tree Collapse file tree 1 file changed +3
-3
lines changed
src/content/learn/react-compiler Expand file tree Collapse file tree 1 file changed +3
-3
lines changed Original file line number Diff line number Diff line change @@ -72,14 +72,14 @@ function ExpensiveComponent({ data, onClick }) {
72
72
}
73
73
```
74
74
75
- _ [ 在 React 编译器游乐场中查看此示例] ( https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA ) _
75
+ __ [ 在 React 编译器游乐场中查看此示例] ( https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA ) __
76
76
77
77
React 编译器会自动应用等效的优化,确保你的应用只在必要时重新渲染。
78
78
79
79
<DeepDive >
80
80
#### React 编译器添加了哪种类型的记忆化? {/* what-kind-of-memoization-does-react-compiler-add* /}
81
81
82
- React 编译器的自动记忆化主要专注于** 提高更新性能** (重新渲染现有组件),因此它聚焦于以下两种使用场景:
82
+ React 编译器的自动记忆化主要专注于 ** 提高更新性能(重新渲染现有组件)** ,因此它聚焦于以下两种使用场景:
83
83
84
84
1 . ** 跳过组件的级联重新渲染**
85
85
* 重新渲染 ` <Parent /> ` 会导致其组件树中的许多组件重新渲染,即使只有 ` <Parent /> ` 发生了变化
@@ -88,7 +88,7 @@ React 编译器的自动记忆化主要专注于**提高更新性能**(重新
88
88
89
89
#### 优化重新渲染 {/* optimizing-re-renders* /}
90
90
91
- React 允许你将 UI 表达为其当前状态的函数(更具体地说:其 props、state 和 context)。在其当前的实现中,当一个组件的状态发生变化时,React 会重新渲染该组件 _ 及其所有子组件 _ ,除非你使用了 ` useMemo() ` 、` useCallback() ` 或 ` React.memo() ` 进行手动记忆优化。例如,在以下示例中,每当 ` <FriendList> ` 的状态变化时,` <MessageButton> ` 都会重新渲染:
91
+ React 允许你将 UI 表达为其当前状态的函数(更具体地说:其 props、state 和 context)。在其当前的实现中,当一个组件的状态发生变化时,React 会重新渲染该组件 __ 及其所有子组件 __ ,除非你使用了 ` useMemo() ` 、` useCallback() ` 或 ` React.memo() ` 进行手动记忆优化。例如,在以下示例中,每当 ` <FriendList> ` 的状态变化时,` <MessageButton> ` 都会重新渲染:
92
92
93
93
``` javascript
94
94
function FriendList ({ friends }) {
You can’t perform that action at this time.
0 commit comments