From 61214160a111760734de8a83b71c4b7bbac78282 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 7 Oct 2024 14:23:38 +0900 Subject: [PATCH] Resolve conflicts --- .../blog/2024/04/25/react-19-upgrade-guide.md | 12 ++--------- src/content/community/acknowledgements.md | 6 +----- .../learn/synchronizing-with-effects.md | 4 ---- src/content/learn/thinking-in-react.md | 12 ++--------- src/content/learn/tutorial-tic-tac-toe.md | 4 ---- .../learn/updating-objects-in-state.md | 4 ---- .../learn/you-might-not-need-an-effect.md | 4 ---- .../reference/react-dom/preinitModule.md | 9 --------- .../server/renderToPipeableStream.md | 17 +--------------- src/content/reference/react/useMemo.md | 20 ++++++++----------- src/content/reference/react/useReducer.md | 7 +------ src/content/reference/react/useState.md | 8 ++------ src/content/reference/react/useTransition.md | 8 ++------ 13 files changed, 19 insertions(+), 96 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 66de08959..b2821150b 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -353,11 +353,7 @@ npm install react-shallow-renderer --save-dev ##### シャローレンダリングの再考を {/*please-reconsider-shallow-rendering*/} -<<<<<<< HEAD -シャローレンダリングは React の内部構造に依存しており、将来のアップグレードの妨げとなる可能性があります。テストを [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) や [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) に移行することをお勧めします。 -======= -Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a +シャローレンダリングは React の内部構造に依存しており、将来のアップグレードの妨げとなる可能性があります。テストを [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) や [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) に移行することをお勧めします。 @@ -528,11 +524,7 @@ Accessing element.ref is no longer supported. ref is now a regular prop. It will このテストレンダラは、[React Testing Library](https://testing-library.com) のようなより実用的なテスト戦略が利用可能になる前に作成されたものです。現在では、モダンなテストライブラリの使用が推奨されます。 -<<<<<<< HEAD -React 19 では、`react-test-renderer` は非推奨警告をログに記録するようになり、また並行レンダーに切り替わりました。モダンかつよりよくサポートされたテスト体験のためには、テストを [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) または [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) に移行することを推奨します。 -======= -In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience. ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a +React 19 では、`react-test-renderer` は非推奨警告をログに記録するようになり、また並行レンダーに切り替わりました。モダンかつよりよくサポートされたテスト体験のためには、テストを [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) または [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) に移行することを推奨します。 ## 注目すべき変更点 {/*notable-changes*/} diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index 8adfdb67e..02994c78c 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -59,11 +59,7 @@ title: 謝辞 このリストは全員を網羅したものではありません。 -<<<<<<< HEAD -特に、長年にわたる指導とサポートをしていただいた [Tom Occhino](https://github.com/tomocchino) と [Adam Wolff](https://github.com/wolffiex) に感謝いたします。[React を他の言語に翻訳](https://translations.reactjs.org/)してくださったボランティアの皆様にも感謝いたします。 -======= -We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/) ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a +特に、長年にわたる指導とサポートをしていただいた [Tom Occhino](https://github.com/tomocchino) と [Adam Wolff](https://github.com/wolffiex) に感謝いたします。[React を他の言語に翻訳](https://translations.react.dev/)してくださったボランティアの皆様にも感謝いたします。 ## 追加の謝辞 {/*additional-thanks*/} diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index f593b0175..4a1982700 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -627,11 +627,7 @@ React は、開発中に意図的にコンポーネントを再マウントし ### React 以外のウィジェットを制御する {/*controlling-non-react-widgets*/} -<<<<<<< HEAD 時に、React で書かれていない UI ウィジェットを追加したい場合があります。例えば、ページに地図コンポーネントを追加しようとしているとします。`setZoomLevel()` メソッドがあり、React のコード内の `zoomLevel` という state 変数と同期させたいとします。エフェクトは次のようになります。 -======= -Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this: ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a ```js useEffect(() => { diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 88c0a0356..31808426c 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -265,19 +265,11 @@ props と state は異なるものですが、それらは協調して働きま それではこの戦術をサンプルアプリにも適用してみましょう： -<<<<<<< HEAD 1. **state を使用するコンポーネントの特定：** * `ProductTable` は、これらの state（検索テキストとチェックボックスの値）に基づいて製品リストをフィルタリングする必要があります。 * `SearchBar` は、これらの state（検索テキストとチェックボックスの値）を表示する必要があります。 -1. **共通の親を見つける：** 両方のコンポーネントに共通の最初の親コンポーネントは `FilterableProductTable` です。 -2. **state がどこにあるべきかを決定する：** フィルタ文字列とチェック状態の値を `FilterableProductTable` に保持することにします。 -======= -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a +2. **共通の親を見つける：** 両方のコンポーネントに共通の最初の親コンポーネントは `FilterableProductTable` です。 +3. **state がどこにあるべきかを決定する：** フィルタ文字列とチェック状態の値を `FilterableProductTable` に保持することにします。 したがって、state の値は `FilterableProductTable` にあることになります。 diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 1756dd528..9c628bb70 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -1133,11 +1133,7 @@ export default function Board() { -<<<<<<< HEAD JavaScript は[クロージャ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)をサポートしているため、内側の関数（例：`handleClick`）は外側の関数（例：`Board`）で定義されている変数や関数にアクセスできます。`handleClick` 関数は、state である `squares` を読み取ったり、`setSquares` メソッドを呼び出したりできます。これらは両方とも `Board` 関数の内部で定義されているためです。 -======= -JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in an outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function. ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index d85dca6e4..14af5e606 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -379,11 +379,7 @@ input { margin-left: 5px; margin-bottom: 5px; } #### 複数のフィールドに単一のイベントハンドラを使う {/*using-a-single-event-handler-for-multiple-fields*/} -<<<<<<< HEAD オブジェクト定義内で `[` と `]` 括弧を使って、動的な名前のプロパティを指定することもできます。以下は上記と同じ例ですが、3 つの異なるイベントハンドラの代わりに 1 つのイベントハンドラを使用しています。 -======= -You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones: ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 494988bc9..c610e72de 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,11 +408,7 @@ function Game() { このコードには 2 つの問題があります。 -<<<<<<< HEAD 1 つ目の問題は、非常に効率が悪いことです。コンポーネント（およびその子）は、連鎖内の各 `set` コールの間で毎回再レンダーする必要があります。上記の例では、最悪の場合、下位のツリーに 3 回の不要な再レンダー（`setCard` → レンダー → `setGoldCardCount` → レンダー → `setRound` → レンダー → `setIsGameOver` → レンダー）が発生することになります。 -======= -The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a 2 つ目の問題は、たとえこれが遅くなかったとしても、コードが発展するにつれ、書いた「チェイン」が新しい要件に適合しないケースが出てくるということです。例えばゲームの手順を遡る機能を追加しているとしましょう。このためには、各 state 変数を過去のある時点の値に再セットしていくことになります。しかし過去の値から `card` の state をセットした時点で再びエフェクトの連鎖処理がトリガされ、表示されるデータが変更されてしまいます。このようなコードは、硬直的で壊れやすいものです。 diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index fb226134e..07cd96c0f 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -51,21 +51,12 @@ function AppRoot() { #### 引数 {/*parameters*/} -<<<<<<< HEAD * `href`: 文字列。ダウンロードして実行したいモジュールの URL。 * `options`: オブジェクト。以下のプロパティを含みます。 * `as`: 必須の文字列。`'script'` である必要があります。 * `crossOrigin`: 文字列。使用する [CORS ポリシー](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)。可能な値は `anonymous` と `use-credentials` です。 * `integrity`: 文字列。[真正性を検証する](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)ために使用するリソースの暗号化ハッシュ。 * `nonce`: 文字列。厳格なコンテンツセキュリティポリシーを使用する際に[リソースを許可するための暗号化 nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)。 -======= -* `href`: a string. The URL of the module you want to download and execute. -* `options`: an object. It contains the following properties: - * `as`: a required string. It must be `'script'`. - * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. - * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). - * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. ->>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a #### 返り値 {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 6222f1118..cee24712f 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -48,7 +48,6 @@ const { pipe } = renderToPipeableStream(, { * `reactNode`: HTML へとレンダーしたい React ノード。例えば、`` のような JSX 要素です。これはドキュメント全体を表すことが期待されているため、`App` コンポーネントは `` タグをレンダーする必要があります。 -<<<<<<< HEAD * **省略可能** `options`: ストリーム関連のオプションが含まれたオブジェクト。 * **省略可能** `bootstrapScriptContent`: 指定された場合、この文字列がインラインの `