diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 8b103938e..12e82d9c3 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -5,21 +5,21 @@ version: experimental -**This API is experimental and is not available in a stable version of React yet.** +**この API は実験的なものであり、まだ React の安定版では利用できません**。 -You can try it by upgrading React packages to the most recent experimental version: +React パッケージを最新の実験的バージョンにアップグレードすることで試すことができます。 - `react@experimental` - `react-dom@experimental` - `eslint-plugin-react-hooks@experimental` -Experimental versions of React may contain bugs. Don't use them in production. +React の実験的バージョンにはバグが含まれている可能性があります。本番環境では使用しないでください。 -`` lets you hide and show part of the UI. +`` を使い、UI の一部を非表示にしたり表示したりします。 ```js @@ -34,11 +34,11 @@ Experimental versions of React may contain bugs. Don't use them in production. --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `` {/*activity*/} -Wrap a part of the UI in `` to manage its visibility state: +UI の一部を `` でラップすることで、その可視性状態を管理します。 ```js import {unstable_Activity as Activity} from 'react'; @@ -48,30 +48,30 @@ import {unstable_Activity as Activity} from 'react'; ``` -When "hidden", the `children` of `` are not visible on the page. If a new `` 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. +"hidden" の場合、`` の `children` はページに表示されません。新しい `` が "hidden" としてマウントされると、ページ上の表示されているコンテンツをブロックすることなく、低優先度でコンテンツをプリレンダー (pre-render) しますが、エフェクトを作成することによるマウントは行いません。"visible" の Activity が "hidden" に切り替わると、概念的にはすべてのエフェクトを破棄することでアンマウントしますが、その state は保存します。これにより、"hidden" の Activity の state を再作成することなく、"visible" と "hidden" の state を高速に切り替えることができます。 -In the future, "hidden" Activities may automatically destroy state based on resources like memory. +将来的には、"hidden" の Activity はメモリなどのリソースに基づいて state を自動的に破棄する可能性があります。 -#### Props {/*props*/} +#### props {/*props*/} -* `children`: The actual UI you intend to render. -* **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. +* `children`: 実際にレンダーしたい UI。 +* **省略可能** `mode`: "visible" または "hidden"。デフォルトは "visible"。"hidden" の場合、子の更新は低優先度として遅延される。Activity が "visible" に切り替わるまで、コンポーネントはエフェクトを作成しない。"visible" の Activity が "hidden" に切り替わると、エフェクトは破棄される。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -- While hidden, the `children` of `` are hidden on the page. -- `` 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 [``](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior. -- When used with ``, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation. -- Parts of the UI wrapped in `` are not included in the SSR response. -- Parts of the UI wrapped in `` will hydrate at a lower priority than other content. +- hidden の間、`` の `children` はページ上で非表示になります。 +- `` は、"visible" から "hidden" に切り替わる際、React の state や DOM の状態を破棄することなくすべてのエフェクトをアンマウントします。これは、マウント時に一度だけ実行されることが期待されるエフェクトであっても、"hidden" から "visible" に切り替わる際に再度実行されることを意味します。概念的には、"hidden" 状態の Activity はアンマウントされるが破棄されてもいないということです。この挙動による予期せぬ副作用をキャッチするために [``](/reference/react/StrictMode) を使用することをお勧めします。 +- `` と共に使用すると、トランジションで表示される非表示の Activity は "enter" アニメーションを起動します。トランジションで非表示になる表示中の Activity は "exit" アニメーションを起動します。 +- `` でラップされた UI は、SSR のレスポンスに含まれません。 +- `` でラップされた UI は、他のコンテンツよりも低い優先度でハイドレーションされます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Pre-render part of the UI {/*pre-render-part-of-the-ui*/} +### UI の一部を事前レンダーする {/*pre-render-part-of-the-ui*/} -You can pre-render part of the UI using ``: +`` を使用して、UI の一部を事前レンダーしておけます。 ```js @@ -79,11 +79,11 @@ You can pre-render part of the UI using ``: ``` -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. +Activity が `mode="hidden"` でレンダーされると、`children` はページに表示されませんが、ページ上の表示されているコンテンツよりも低い優先度でレンダーされます。 -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. +後で `mode` が "visible" に切り替わると、事前レンダーされた子要素がマウントされ、表示されるようになります。これは、ユーザが次に操作する可能性が高い UI を準備して、読み込み時間を短縮するために使用できます。 -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: +以下の [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators) の例では、`PostsTab` コンポーネントが `use` を使用してデータをフェッチしています。"Posts" タブをクリックすると、`PostsTab` コンポーネントがサスペンドし、ボタンにローディング中という状態が表示されます。 @@ -276,9 +276,9 @@ b { display: inline-block; margin-right: 10px; } -In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab. +この例の場合、"Posts" タブをクリックした際、ユーザは投稿が読み込まれるのを待つ必要があります。 -We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden ``: +非アクティブなタブを非表示の `` で事前レンダーしておくことで、"Posts" タブの遅延を減らすことができます。 @@ -470,10 +470,10 @@ b { display: inline-block; margin-right: 10px; } --- -### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/} +### UI の state を保持する {/*keeping-state-for-part-of-the-ui*/} -You can keep state for parts of the UI by switching `` from "visible" to "hidden": +`` を "visible" から "hidden" に切り替える際に、当該部分の UI の state を保持できます。 ```js @@ -481,11 +481,11 @@ You can keep state for parts of the UI by switching `` from "visible" ``` -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. +Activity が `mode="visible"` から "hidden" に切り替わると、`children` はページ上で非表示になり、すべてのエフェクトを破棄することでアンマウントしますが、React の state と DOM の状態は保持します。 -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. +後で `mode` が "visible" に切り替わると、保存された state は、エフェクトを作成して子をマウントする際に再利用されます。これは、ユーザが再度操作する可能性が高い UI の state を保持し、DOM や React の state を維持するために使用できます。 -In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `