@@ -85,7 +85,7 @@ const deferred = useDeferredValue(value);
8585< / Suspense>
8686```
8787
88- デフォルトでは、これらのアニメーションは[ ビュー遷移のためのデフォルト CSS アニメーション] ( https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations ) を使用します(通常はスムースなクロスフェード)。アニメーションの実行方法を定義するために [ ビュー遷移関連の擬似セレクタ] ( https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree ) を使用できます。たとえば、すべてのビュー遷移についてデフォルトのアニメーションを変更するには ` * ` を使用できます。
88+ デフォルトでは、これらのアニメーションは[ ビュー遷移のためのデフォルト CSS アニメーション] ( https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations ) を使用します(通常はスムースなクロスフェード)。「どんな」アニメーションが発生するかを定義するために [ ビュー遷移関連の擬似セレクタ] ( https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree ) を使用できます。たとえば、すべてのビュー遷移についてデフォルトのアニメーションを変更するには ` * ` を使用できます。
8989
9090```
9191// "how" to animate.
@@ -4900,7 +4900,7 @@ root.render(
49004900
49014901### 起因別のアニメーション {/* animating-based-on-cause* /}
49024902
4903- 場合によっては、アニメーションがトリガされた起因 (cause) に基づいて、要素を異なる方法でアニメーションさせたいことがあります 。このユースケースのために、ビュー遷移の起因を指定するための新しい API である ` addTransitionType ` を追加しました。
4903+ 場合によっては、起因 (cause) に基づいてアニメーションを変えたいことがあります 。このユースケースのために、ビュー遷移の起因を指定するための新しい API である ` addTransitionType ` を追加しました。
49044904
49054905``` js {4,11}
49064906function navigate (url ) {
@@ -14255,7 +14255,7 @@ Activity の別のモードとして我々が考慮しているのは、メモ
1425514255フックをリリースしたとき、私たちには 3 つの動機がありました。
1425614256
1425714257- ** コンポーネント間でのコード共有** :フックがレンダープロップや高階コンポーネントといったパターンを置き換えたことで、コンポーネントの階層構造を変更せずにステートフルなロジックを再利用できるようになりました。
14258- - ** ライフサイクルではなく関数指向で考える** :コンポーネントのコードをライフサイクルメソッドに基づいて無理矢理分割する代わりに、フックのおかげでコードの意味的な関連性 (サブスクリプションの設定やデータフェッチ)に基づいて 1 つのコンポーネントをより小さな関数に分割できるようになりました 。
14258+ - ** ライフサイクルではなく関数指向で考える** :フックのおかげで、1 つのコンポーネントを、ライフサイクルメソッドに基づいて無理矢理分割するのではなく、コードの意味的な関連性 (サブスクリプションの設定やデータフェッチ)に基づいて小さな関数へと分割できるようになりました 。
1425914259- ** 事前コンパイルのサポート** :フックは、事前コンパイルをサポートし、ライフサイクルメソッドやクラスの制限によって引き起こされる最適化漏れといった落とし穴を減らせるように設計されました。
1426014260
1426114261リリース以来、フックは* コンポーネント間でのコード共有* という点では成功しています。フックは、コンポーネント間でロジックを共有するための望ましい方法となり、レンダープロップや高階コンポーネントの使用例は減少しています。フックはまた、クラスコンポーネントでは不可能だった Fast Refresh のような機能をサポートすることにも成功しています。
@@ -14302,9 +14302,9 @@ useEffect(() => {
1430214302}); // compiler inserted dependencies.
1430314303```
1430414304
14305- このコードでは、React Compiler が依存配列を自動的に推論して挿入するため、見る必要も書く必要もありません 。[ IDE 拡張] ( #compiler-ide-extension ) や [ ` useEffectEvent ` ] ( /reference/react/useEffectEvent ) のような機能を使用することで、デバッグが必要なときや依存値を削除して最適化したい時のために、コンパイラが挿入したものを表示する CodeLens を提供できます。これにより、エフェクトを書くための正しいメンタルモデルが強化され、コンポーネントやフックの state を他のものと同期させるために任意のタイミングで実行できるエフェクトが書けるようになるでしょう。
14305+ このコードでは、依存配列を React Compiler が自動的に推論して挿入するため、見たり書いたりする必要がありません 。[ IDE 拡張] ( #compiler-ide-extension ) や [ ` useEffectEvent ` ] ( /reference/react/useEffectEvent ) のような機能を使用することで、デバッグが必要なときや依存値を削除して最適化したい時のために、コンパイラが挿入したものを表示する CodeLens を提供できます。これにより、エフェクトを書くための正しいメンタルモデルが強化され、コンポーネントやフックの state を他のものと同期させるために任意のタイミングで実行できるエフェクトが書けるようになるでしょう。
1430614306
14307- 依存配列を自動的に挿入することにより我々が期待しているのは 、ただ書きやすくなるというだけのことではありません。コンポーネントのライフサイクルではなく「エフェクトが何をするのか」という視点で考えることを強制し、理解がしやすくなることを期待しています。
14307+ 依存配列の自動挿入について我々が期待しているのは 、ただ書きやすくなるというだけのことではありません。コンポーネントのライフサイクルではなく「エフェクトが何をするのか」という視点で考えることを強制し、理解がしやすくなることを期待しています。
1430814308
1430914309---
1431014310
@@ -14346,7 +14346,7 @@ IDE 拡張はまだ初期の探求段階ですが、今後の更新で進捗を
1434614346
1434714347## 並行ストア {/* concurrent-stores* /}
1434814348
14349- React 18 を並行レンダー (concurrent rendering) 機能と共にリリースした際、` useSyncExternalStore ` もリリースしました。これは 、React の state やコンテクストを使用しない外部ストアライブラリが 、当該ストアが更新されたときに同期レンダーを強制することで、[ 並列レンダーをサポート] ( https://github.com/reactwg/react-18/discussions/70 ) できるようにするためのものでした 。
14349+ React 18 を並行レンダー (concurrent rendering) 機能と共にリリースした際、` useSyncExternalStore ` もリリースしました。これによって 、React の state やコンテクストを使用しない外部ストアライブラリは 、当該ストアが更新されたときに同期レンダーを強制することで、[ 並列レンダーをサポート] ( https://github.com/reactwg/react-18/discussions/70 ) できるようになりました 。
1435014350
1435114351しかし ` useSyncExternalStore ` の使用にはコストが伴います。トランジションのような並行レンダー機能からの離脱を強制し、既存のコンテンツにサスペンスのフォールバックを表示させてしまうからです。
1435214352
@@ -14356,7 +14356,7 @@ React 19 がリリースされましたので、`use` API を使用して並行
1435614356const value = use (store);
1435714357```
1435814358
14359- 私たちの目標は、レンダー中に不整合 (tearing) を起こさず外部状態を読み取れるようにし 、React が提供するすべての並行レンダー機能とシームレスに連携できるようにすることです。
14359+ 私たちの目標は、外部の状態を、 レンダー中に不整合 (tearing) を起こさず読み取ることができ 、React が提供するすべての並行レンダー機能とシームレスに連携できるようにすることです。
1436014360
1436114361この研究はまだ初期段階です。進展があれば、どのような新しい API になるかを共有する予定です。
1436214362
0 commit comments