Skip to content

Commit fb49b0c

Browse files
authored
docs: add troubleshooting of translate in flushSync.md (#1797)
2 parents f37d310 + ff12d8e commit fb49b0c

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

src/content/reference/react-dom/flushSync.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -134,34 +134,34 @@ export default function PrintApp() {
134134

135135
---
136136

137-
## Troubleshooting {/*troubleshooting*/}
137+
## 故障排除 {/*troubleshooting*/}
138138

139-
### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
139+
### 我收到了一个错误:"flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
140140

141141

142-
React cannot `flushSync` in the middle of a render. If you do, it will noop and warn:
142+
React 不能在渲染中调用 `flushSync`。如果你这样做,它将不执行任何操作并发出警告:
143143

144144
<ConsoleBlock level="error">
145145

146-
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
146+
警告: flushSync 在生命周期方法中被调用。当 React 已经在渲染时,React 无法刷新。考虑将此调用移至调度器任务或微任务中。
147147

148148
</ConsoleBlock>
149149

150-
This includes calling `flushSync` inside:
150+
这包括在以下场景中调用 `flushSync`
151151

152-
- rendering a component.
153-
- `useLayoutEffect` or `useEffect` hooks.
154-
- Class component lifecycle methods.
152+
- 渲染组件时。
153+
- `useLayoutEffect` `useEffect` hooks 中。
154+
- 类组件的生命周期方法中。
155155

156-
For example, calling `flushSync` in an Effect will noop and warn:
156+
例如,在 Effect 中调用 `flushSync` 将不执行任何操作并发出警告:
157157

158158
```js
159159
import { useEffect } from 'react';
160160
import { flushSync } from 'react-dom';
161161

162162
function MyComponent() {
163163
useEffect(() => {
164-
// 🚩 Wrong: calling flushSync inside an effect
164+
// 🚩 错误:在 Effect 内部调用 flushSync
165165
flushSync(() => {
166166
setSomething(newValue);
167167
});
@@ -171,23 +171,23 @@ function MyComponent() {
171171
}
172172
```
173173

174-
To fix this, you usually want to move the `flushSync` call to an event:
174+
要修复此问题,通常需要将 `flushSync` 调用移至一个事件处理函数:
175175

176176
```js
177177
function handleClick() {
178-
//Correct: flushSync in event handlers is safe
178+
//正确: 在事件处理函数中使用 flushSync 是安全的
179179
flushSync(() => {
180180
setSomething(newValue);
181181
});
182182
}
183183
```
184184

185185

186-
If it's difficult to move to an event, you can defer `flushSync` in a microtask:
186+
如果很难将其移至事件处理函数中,你可以通过微任务来延迟 `flushSync`
187187

188188
```js {3,7}
189189
useEffect(() => {
190-
//Correct: defer flushSync to a microtask
190+
//正确: 将 flushSync 延迟到微任务中
191191
queueMicrotask(() => {
192192
flushSync(() => {
193193
setSomething(newValue);
@@ -196,10 +196,10 @@ useEffect(() => {
196196
}, []);
197197
```
198198

199-
This will allow the current render to finish and schedule another syncronous render to flush the updates.
199+
这将允许当前渲染完成,并调度另一次同步渲染来刷新更新。
200200

201201
<Pitfall>
202202

203-
`flushSync` can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync` in a microtask as an escape hatch.
203+
`flushSync` 会严重影响性能,而在微任务中调用 `flushSync` 这种特殊模式对性能的损害则更为严重。因此,仅当所有其他方案都无效时,才应考虑在微任务中调用 `flushSync` 作为最后的应急手段。
204204

205205
</Pitfall>

0 commit comments

Comments
 (0)