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
`<Activity>`lets you hide and show part of the UI.
22
+
`<Activity>`を使い、UI の一部を非表示にしたり表示したりします。
23
23
24
24
25
25
```js
@@ -34,11 +34,11 @@ Experimental versions of React may contain bugs. Don't use them in production.
34
34
35
35
---
36
36
37
-
## Reference {/*reference*/}
37
+
## リファレンス {/*reference*/}
38
38
39
39
### `<Activity>` {/*activity*/}
40
40
41
-
Wrap a part of the UI in`<Activity>`to manage its visibility state:
41
+
UI の一部を`<Activity>`でラップすることで、その可視性状態を管理します。
42
42
43
43
```js
44
44
import {unstable_ActivityasActivity} from'react';
@@ -48,42 +48,42 @@ import {unstable_Activity as Activity} from 'react';
48
48
</Activity>
49
49
```
50
50
51
-
When "hidden", the `children` of `<Activity />`are not visible on the page. If a new `<Activity>`mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity.
51
+
"hidden" の場合、`<Activity />`の `children` はページに表示されません。新しい `<Activity>`が "hidden" としてマウントされると、ページ上の表示されているコンテンツをブロックすることなく、低優先度でコンテンツをプリレンダー (pre-render) しますが、エフェクトを作成することによるマウントは行いません。"visible" の Activity が "hidden" に切り替わると、概念的にはすべてのエフェクトを破棄することでアンマウントしますが、その state は保存します。これにより、"hidden" の Activity の state を再作成することなく、"visible" と "hidden" の state を高速に切り替えることができます。
52
52
53
-
In the future, "hidden" Activities may automatically destroy state based on resources like memory.
53
+
将来的には、"hidden" の Activity はメモリなどのリソースに基づいて state を自動的に破棄する可能性があります。
54
54
55
-
#### Props {/*props*/}
55
+
#### props {/*props*/}
56
56
57
-
*`children`: The actual UI you intend to render.
58
-
***optional**`mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed.
-While hidden, the `children` of `<Activity>`are hidden on the page.
63
-
-`<Activity>`will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode)to catch any unexpected side-effects from this behavior.
64
-
-When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
65
-
-Parts of the UI wrapped in `<Activity mode="hidden">`are not included in the SSR response.
66
-
-Parts of the UI wrapped in `<Activity mode="visible">`will hydrate at a lower priority than other content.
When an Activity is rendered with `mode="hidden"`, the `children`are not visible on the page, but are rendered at lower priority than the visible content on the page.
When the `mode`later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times.
In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab`component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab`component suspends, causing the button loading state to appear:
When an Activity switches from `mode="visible"`to "hidden", the `children`will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state.
484
+
Activity が `mode="visible"`から "hidden" に切り替わると、`children`はページ上で非表示になり、すべてのエフェクトを破棄することでアンマウントしますが、React の state と DOM の状態は保持します。
485
485
486
-
When the `mode`later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state.
486
+
後で `mode`が "visible" に切り替わると、保存された state は、エフェクトを作成して子をマウントする際に再利用されます。これは、ユーザが再度操作する可能性が高い UI の state を保持し、DOM や React の state を維持するために使用できます。
487
487
488
-
In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab`includes a `<textarea>`with a draft message to send. If you enter some text and change to a different tab, then when you click the “Contact” tab again, the draft message is lost:
When an `<Activity>`is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
879
+
`<Activity>`が "hidden" の場合、すべてのエフェクトはアンマウントされます。概念的には、コンポーネントはアンマウントされていますが、React は後で使用するために state を保存しています。
880
880
881
-
This is a feature of Activity because it means subscriptions won't be subscribed for hidden parts of the UI, reducing the amount of work for hidden content. It also means cleanup, such as pausing a video (which would be expected if you unmounted without Activity) will fire. When an Activity switches to "visible", it will mount by creating the Effects, which will subscribe and play the video.
Whenever you change videos and come back, the video re-loads from the beginning. To maintain the state, you may try to render both videos, and hide the inactive video in `display: none`. However, this will cause both videos to play at the same time:
This is similar to what would happen if Activity mounted Effects when hidden. Similarly, if Activity didn't unmount Effects when hiding, the videos would continue to play in the background.
For this reason, it's best to think of Activity conceptually as "unmounting" and "remounting" the component, but saving the React or DOM state for later. In practice, this works as expected if you have followed the [You Might Not Need an Effect](learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode)which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects.
1157
+
このため、最善の考え方は、Activity は概念的にはコンポーネントを「アンマウント」および「再マウント」するが、React の state や DOM の状態を後のために保持しておく、と考えることです。実際、[そのエフェクトは不要かも](/learn/you-might-not-need-an-effect)のガイドに従っている限り、これは期待どおりに機能します。問題のあるエフェクトを積極的に見つけるに、[`<StrictMode>`](/reference/react/StrictMode)を追加することをお勧めします。これにより、Activity のアンマウントとマウントが積極的に実行され、予期せぬ副作用をキャッチできます。
1158
1158
1159
-
### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
1159
+
### 非表示の Activity が SSR でレンダーされない {/*my-hidden-activity-is-not-rendered-in-ssr*/}
1160
1160
1161
-
When you use `<Activity mode="hidden">`during server-side rendering, the content of the Activity will not be included in the SSR response. This is because the content is not visible on the page and is not needed for the initial render. If you need to include the content in the SSR response, you can use a different approach like [`useDeferredValue`](/reference/react/useDeferredValue)to defer rendering of the content.
1161
+
サーバサイドレンダリング中に `<Activity mode="hidden">`を使用すると、Activity のコンテンツは SSR レスポンスに含まれません。これは、コンテンツがページに表示されないので初期レンダーには必要ないためです。コンテンツを SSR レスポンスに含める必要がある場合は、[`useDeferredValue`](/reference/react/useDeferredValue)のような別のアプローチを使用して、コンテンツのレンダーを遅延させることができます。
0 commit comments