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: content/docs/code-splitting.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -145,10 +145,10 @@ function MyComponent() {
145
145
}
146
146
```
147
147
148
-
### 避免 fallbacks {#avoiding-fallbacks}
149
-
Any component may suspend as a result of rendering, even components that were already shown to the user. In order for screen content to always be consistent, if an already shown component suspends, React has to hide its tree up to the closest `<Suspense>`boundary. However, from the user's perspective, this can be disorienting.
In this example, if tab gets changed from `'photos'`to`'comments'`, but `Comments`suspends, the user will see a glimmer. This makes sense because the user no longer wants to see `Photos`, the `Comments` component is not ready to render anything, and React needs to keep the user experience consistent, so it has no choice but to show the `Glimmer` above.
However, sometimes this user experience is not desirable. In particular, it is sometimes better to show the "old" UI while the new UI is being prepared. You can use the new [`startTransition`](/docs/react-api.html#starttransition) API to make React do this:
182
+
但是,有時候這樣的使用者體驗並不理想。在特定場景下,有時候在新的 UI 準備好之前,顯示「舊」的 UI 會更好。你可以使用新的 [`startTransition`](/docs/react-api.html#starttransition) API 來讓 React 執行此操作:
183
183
184
184
```js
185
185
functionhandleTabSelect(tab) {
@@ -189,7 +189,7 @@ function handleTabSelect(tab) {
189
189
}
190
190
```
191
191
192
-
Here, you tell React that setting tab to`'comments'`is not an urgent update, but is a [transition](/docs/react-api.html#transitions)that may take some time. React will then keep the old UI in place and interactive, and will switch to showing `<Comments />` when it is ready. See [Transitions](/docs/react-api.html#transitions) for more info.
0 commit comments