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
The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.
9
+
`react-dom` 提供了 DOM 的特定方法讓你可以在你的應用程式頂層使用，如果有需要，也可以作為一個逃生窗口來脫離 React 模型。
13
10
14
11
```js
15
12
import*asReactDOMfrom'react-dom';
16
13
```
17
14
18
-
If you use ES5 with npm, you can write:
15
+
如果你使用 ES5 與 npm，你可以這樣寫：
19
16
20
17
```js
21
18
var ReactDOM =require('react-dom');
22
19
```
23
20
24
-
The `react-dom` package also provides modules specific to client and server apps:
21
+
`react-dom` package 也提供了特定於 client 和 server 應用程式的 module：
> Both `render`and`hydrate`have been replaced with new [client methods](/docs/react-dom-client.html) in React 18. These methods will warn that your app will behave as if it's running React 17 (learn more [here](https://reactjs.org/link/switch-to-createroot)).
> We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page, but you're on your own if you choose to take this path.
Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
57
+
提供了一個方式將 children [render 存在於 DOM component 層次結構之外的 DOM 節點中](/docs/portals.html)。
79
58
80
59
### `flushSync()` {#flushsync}
81
60
82
61
```javascript
83
62
flushSync(callback)
84
63
```
85
64
86
-
Force React to flush any updates inside the provided callback synchronously. This method is useful for being able to read the result of those updates immediately.
87
-
88
-
> Note:
89
-
>
90
-
> `flushSync` can have a significant impact on performance. Use sparingly.
91
-
>
92
-
> `flushSync` may force pending Suspense boundaries to show their `fallback` state.
93
-
>
94
-
> `flushSync` may also run pending effects and synchronously apply any updates they contain before returning.
95
-
>
96
-
> `flushSync` may also 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.
Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#function-and-class-components)).
> `render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
129
-
>
130
-
> `render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
131
-
>
132
-
> `render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
133
-
> and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
134
-
> [callback ref](/docs/refs-and-the-dom.html#callback-refs) to the root element.
135
-
>
136
-
> Using `render()` to hydrate a server-rendered container is deprecated. Use [`hydrateRoot()`](#hydrateroot) instead.
Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
181
-
>>>>>>> 707f22d25f5b343a2e5e063877f1fc97cb1f48a1
137
+
從 DOM 移除一個 mount React component 並清除它的 event handler 以及 state。如果沒有 component 被 mount 在 container 的話，呼叫這個 function 並不會做任何事。如果一個 component 被 unmount 回傳一個 `true`，反之如果沒有 component 被 unmount，回傳 `false`。
182
138
183
139
* * *
184
140
@@ -202,14 +158,3 @@ findDOMNode(component)
202
158
> `findDOMNode` 不能被用在 function component。
203
159
204
160
* * *
205
-
<<<<<<< HEAD
206
-
207
-
### `createPortal()` {#createportal}
208
-
209
-
```javascript
210
-
ReactDOM.createPortal(child, container)
211
-
```
212
-
213
-
創建 portal。Portal 提供了一種方法來 [render children 為存在於 DOM component 層級結構之外的 DOM node](/docs/portals.html)。
`React.Suspense` lets you specify the loading indicator in 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).
354
345
355
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 newUI is 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.
386
369
387
370
#### `React.Suspense`in Server Side Rendering {#reactsuspense-in-server-side-rendering}
388
371
During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending.
389
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.
390
373
391
374
#### `React.Suspense` during hydration {#reactsuspense-during-hydration}
392
-
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
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
393
376
a higher priority than neighboring boundaries. [Read more](https://github.com/reactwg/react-18/discussions/130)
> Updates in a transitions will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
407
390
>
408
391
> `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