From 92cd4ff504472913bdab8a9c7742a80b0f474025 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 26 Nov 2019 09:36:13 +0000 Subject: [PATCH] WIP: Translate Concurrent UI Patterns --- content/docs/concurrent-mode-patterns.md | 152 +++++++++++------------ 1 file changed, 76 insertions(+), 76 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 21b7b2bff..ecb1e47d0 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -6,15 +6,15 @@ prev: concurrent-mode-suspense.html next: concurrent-mode-adoption.html --- ->Caution: +>警告： > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +> このページでは**安定リリースで[まだ利用できない](/docs/concurrent-mode-adoption.html)実験的機能**を説明しています。本番のアプリケーションで React の実験的ビルドを利用しないでください。これらの機能は React の一部となる前に警告なく大幅に変更される可能性があります。 > ->This documentation is aimed at early adopters and people who are curious. If you're new to React, don't worry about these features -- you don't need to learn them right now. +> このドキュメントは興味のある読者やアーリーアダプター向けのものです。React が初めての方はこれらの機能を気にしないで構いません -- 今すぐに学ぶ必要はありません。 -Usually, when we update the state, we expect to see changes on the screen immediately. This makes sense because we want to keep our app responsive to user input. However, there are cases where we might prefer to **defer an update from appearing on the screen**. +通常、state を更新した場合、画面に即座に変化が現れることを期待します。ユーザ入力に対してアプリケーションをレスポンシブに保ちたいので、これは理に適っています。しかし、**画面に更新が現れるのを遅延**させたい場合があります。 -For example, if we switch from one page to another, and none of the code or data for the next screen has loaded yet, it might be frustrating to immediately see a blank page with a loading indicator. We might prefer to stay longer on the previous screen. Implementing this pattern has historically been difficult in React. Concurrent Mode offers a new set of tools to do that. +例えば、ある画面から別の画面に切り替えたいが、次の画面に必要なコードやデータが何もロードされていないという場合、切り替え直後にロード中のインジケータのある空のページを見るのはいらだたしいものです。前の画面にもうしばらく残りたいと思うでしょう。歴史的に React ではこのパターンの実装は困難でした。並列モードはこれを行うための新たなツール群を提供します。 - [Transitions](#transitions) - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) @@ -36,17 +36,17 @@ For example, if we switch from one page to another, and none of the code or data - [SuspenseList](#suspenselist) - [Next Steps](#next-steps) -## Transitions {#transitions} +## トランジション {#transitions} -Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). +前のページ [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html) にある[こちらのデモ](https://codesandbox.io/s/infallible-feather-xjtbu)について改めて考えましょう。 -When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.** +"Next" ボタンをクリックしてアクティブなプロフィールを切り替えた際、既存のページデータは即座に消えて、新しい画面のためのローディングインジケータを見ることになります。これは「望ましくない」ローディング中状態と呼べるでしょう。**新しい画面に遷移する前に新しいコンテンツを待ち、これをスキップすることができれば良さそうです。** -React offers a new built-in `useTransition()` Hook to help with this. +React はこれを補助するたに `useTransition()` という新しい組み込みフックを提供します。 -We can use it in three steps. +これは以下の 3 ステップで利用できます。 -First, we'll make sure that we're actually using Concurrent Mode. We'll talk more about [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) later, but for now it's sufficient to know that we need to use `ReactDOM.createRoot()` rather than `ReactDOM.render()` for this feature to work: +まず、実際に並列モードを利用していることを確かめます。後で[並列モードの利用開始](/docs/concurrent-mode-adoption.html)方法については述べますが、今の所は `ReactDOM.render()` の代わりに `ReactDOM.createRoot()` を使うことでこの機能が使えるということを知っていれば十分です。 ```js const rootElement = document.getElementById("root"); @@ -54,13 +54,13 @@ const rootElement = document.getElementById("root"); ReactDOM.createRoot(rootElement).render(); ``` -Next, we'll add an import for the `useTransition` Hook from React: +次に、React から `useTransition` フックをインポートする文を追加します： ```js import React, { useState, useTransition, Suspense } from "react"; ``` -Finally, we'll use it inside the `App` component: +最後に、`App` コンポーネント内でそれを利用します： ```js{3-5} function App() { @@ -71,18 +71,18 @@ function App() { // ... ``` -**By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`: +**このコードはそれ自体ではまだ何もしません。**このフックの戻り値を使って state の遷移をセットアップします。`useTransition` からの戻り値は 2 つです： -* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. -* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. +* `startTransition` は関数です。これを使って、*どの* state の更新を遅延させたいのかを React に伝えます。 +* `isPending` は真偽値です。React はこれを使って現在トランジションが進行中かどうかを伝えます。 -We will use them right below. +このすぐ後で使ってみます。 -Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen". +`useTransition` に設定オブジェクトを渡したことに気をつけてください。この `timeoutMs` プロパティで**遷移が終了するまでどれだけ待てるか**を指定します。`{timeoutMs: 3000}` を渡すことで、「次のプロフィール画面がロードされるのに 3 秒以上かかったら、大きなスピナーを表示せよ、ただしそれまでは前の画面を表示しつづけていて構わない」ということを伝えています。 -### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition} +### トランジション内で setState をラップする {#wrapping-setstate-in-a-transition} -Our "Next" button click handler sets the state that switches the current profile in the state: +"Next" ボタンのクリックハンドラーは、現在のプロフィールを切り替えるための state を設定しています： ```js{4}