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
*Transitions*are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.
`React.Suspense`lets you specify the loading indicatorin case some components in the tree below it are not yet ready to render. In the future we plan to let`Suspense`handle more scenarios such as data fetching. You can read about thisin [our roadmap](/blog/2018/11/27/react-16-roadmap.html).
344
+
`React.Suspense`讓你指定 loading indicator,避免下面 tree 中的某些 component 尚未準備好 render。未來我們計畫讓 `Suspense`處理更多場景,像是資料的取得。你可以閱讀關於這個在[我們的 roadmap](/blog/2018/11/27/react-16-roadmap.html)。
345
345
346
-
Today, lazy loading components is the **only** use case supported by `<React.Suspense>`:
>For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the "old"UIwhile the newUIis being prepared. Todothis, you can use the newtransition APIs [`startTransition`](#starttransition) and [`useTransition`](/docs/hooks-reference.html#usetransition) to mark updates as transitions and avoid unexpected fallbacks.
#### `React.Suspense`in Server Side Rendering {#reactsuspense-in-server-side-rendering}
371
-
During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending.
372
-
When a component suspends we schedule a low priority task to render the closest Suspense boundary's fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.
370
+
#### `React.Suspense`是 Server Side Rendering {#reactsuspense-in-server-side-rendering}
371
+
在 server side rendering 期間,Suspense Boundaries 允許你透過 suspending 以更小的 chunks 來 flush 應用程式。
#### `React.Suspense` during hydration {#reactsuspense-during-hydration}
375
-
Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before its hydrated will cause the boundary to hydrate at
376
-
a higher priority than neighboring boundaries. [Read more](https://github.com/reactwg/react-18/discussions/130)
`React.startTransition` lets you mark updates inside the provided callback as transitions. This method is designed to be used when [`React.useTransition`](/docs/hooks-reference.html#usetransition) is not available.
> `React.startTransition` does not provide an `isPending` flag. To track the pending status of a transition see [`React.useTransition`](/docs/hooks-reference.html#usetransition).
0 commit comments