You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/flushSync.md
+29-29Lines changed: 29 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: flushSync
4
4
5
5
<Pitfall>
6
6
7
-
Using`flushSync`is uncommon and can hurt the performance of your app.
7
+
使用`flushSync`是不常见的行为,并且可能损伤应用程序的性能。
8
8
9
9
</Pitfall>
10
10
11
11
<Intro>
12
12
13
-
`flushSync`lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
13
+
`flushSync`允许你强制 React 在提供的回调函数内同步刷新任何更新,这将确保 DOM 立即更新。
14
14
15
15
```js
16
16
flushSync(callback)
@@ -22,11 +22,11 @@ flushSync(callback)
22
22
23
23
---
24
24
25
-
## Reference {/*reference*/}
25
+
## 参考 {/*reference*/}
26
26
27
27
### `flushSync(callback)` {/*flushsync*/}
28
28
29
-
Call`flushSync`to force React to flush any pending work and update the DOM synchronously.
29
+
调用`flushSync`强制 React 刷新所有挂起的工作,并同步更新 DOM。
30
30
31
31
```js
32
32
import { flushSync } from'react-dom';
@@ -36,50 +36,50 @@ flushSync(() => {
36
36
});
37
37
```
38
38
39
-
Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
39
+
大多数时候都不需要使用 `flushSync`,请将其作为最后的手段使用。
40
40
41
-
[See more examples below.](#usage)
41
+
[参见下面更多示例](#usage)。
42
42
43
-
#### Parameters {/*parameters*/}
43
+
#### 参数 {/*parameters*/}
44
44
45
45
46
-
*`callback`: A function. React will immediately call this callback and flush any updates it contains synchronously. It may also flush any pending updates, or Effects, or updates inside of Effects. If an update suspends as a result of this `flushSync`call, the fallbacks may be re-shown.
*`flushSync`can significantly hurt performance. Use sparingly.
55
-
*`flushSync`may force pending Suspense boundaries to show their `fallback`state.
56
-
*`flushSync`may run pending effects and synchronously apply any updates they contain before returning.
57
-
*`flushSync`may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync`to force React to flush any <CodeStepstep={1}>state updates</CodeStep> inside the callback synchronously:
65
+
当与浏览器 API 或 UI 库等第三方代码集成时,可能需要强制 React 刷新更新。调用 `flushSync`以强制 React 同步刷新在回调函数内的任何状态更新:
66
66
67
67
```js [[1, 2, "setSomething(123)"]]
68
68
flushSync(() => {
69
69
setSomething(123);
70
70
});
71
-
//By this line, the DOM is updated.
71
+
//这一行代码运行之后,DOM 将被更新。
72
72
```
73
73
74
-
This ensures that, by the time the next line of code runs, React has already updated the DOM.
74
+
这确保了在下一行代码运行时,React 已经更新了 DOM。
75
75
76
-
**Using`flushSync`is uncommon, and using it often can significantly hurt the performance of your app.** If your app only uses React APIs, and does not integrate with third-party libraries, `flushSync`should be unnecessary.
However, it can be helpful for integrating with third-party code like browser APIs.
78
+
然而,它对于与浏览器 API 等第三方代码集成可能会有帮助。
79
79
80
-
Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In most cases, React handles this for you automatically. But in some cases it may be necessary to force a synchronous update.
80
+
一些浏览器 API 希望回调函数内的结果同步写入 DOM,以便在回调函数结束时,浏览器可以对渲染的 DOM 进行操作。在大多数情况下,React 会自动处理这个问题。但在某些情况下,可能需要强制进行同步更新。
81
81
82
-
For example, the browser `onbeforeprint` API allows you to change the page immediately before the print dialog opens. This is useful for applying custom print styles that allow the document to display better for printing. In the example below, you use `flushSync` inside of the `onbeforeprint` callback to immediately "flush" the React state to the DOM. Then, by the time the print dialog opens, `isPrinting`displays "yes":
82
+
例如,浏览器的 `onbeforeprint` API 允许你在打印对话框打开之前立即更改页面。这对于应用自定义打印样式,使文档在打印时能够更好地显示非常有用。在下面的示例中,你在 `onbeforeprint` 回调函数内调用 `flushSync` 来立即将 React 状态“刷新”到 DOM 中。然后,当打印对话框打开时,`isPrinting`会显示为“是”:
83
83
84
84
<Sandpack>
85
85
@@ -111,9 +111,9 @@ export default function PrintApp() {
111
111
112
112
return (
113
113
<>
114
-
<h1>isPrinting:{isPrinting ?'yes':'no'}</h1>
114
+
<h1>是否打印:{isPrinting ?'是':'否'}</h1>
115
115
<button onClick={() =>window.print()}>
116
-
Print
116
+
打印
117
117
</button>
118
118
</>
119
119
);
@@ -122,12 +122,12 @@ export default function PrintApp() {
122
122
123
123
</Sandpack>
124
124
125
-
Without`flushSync`, when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
0 commit comments