diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 437057ec1..f10199e95 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,11 +52,7 @@ export default function PackingList() { -<<<<<<< HEAD -複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。 -======= -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. ->>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 +複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✅) を表示させることです。 これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。 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 7732d21ff..4d70b5750 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,15 +408,9 @@ function Game() { このコードには 2 つの問題があります。 -<<<<<<< HEAD 1 つ目の問題は、非常に効率が悪いことです。コンポーネント(およびその子)は、連鎖内の各 `set` コールの間で毎回再レンダーする必要があります。上記の例では、最悪の場合、下位のツリーに 3 回の不要な再レンダー(`setCard` → レンダー → `setGoldCardCount` → レンダー → `setRound` → レンダー → `setIsGameOver` → レンダー)が発生することになります。 -たとえこれが遅くなかったとしても、コードが発展するにつれ、書いた「チェイン」が新しい要件に適合しないケースが出てきます。例えばゲームの手順を遡る機能を追加しているとしましょう。このためには、各 state 変数を過去のある時点の値に再セットしていくことになります。しかし過去の値から `card` の state をセットした時点で再びエフェクトの連鎖処理がトリガされ、表示されるデータが変更されてしまいます。このようなコードは、硬直的で壊れやすいものです。 -======= -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. - -The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. ->>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 +2 つ目の問題は、たとえこれが遅くなかったとしても、コードが発展するにつれ、書いた「チェイン」が新しい要件に適合しないケースが出てくるということです。例えばゲームの手順を遡る機能を追加しているとしましょう。このためには、各 state 変数を過去のある時点の値に再セットしていくことになります。しかし過去の値から `card` の state をセットした時点で再びエフェクトの連鎖処理がトリガされ、表示されるデータが変更されてしまいます。このようなコードは、硬直的で壊れやすいものです。 このような場合、レンダー中に計算できるものはそこで行い、イベントハンドラで state の調整を終わらせる方が良いでしょう。 diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index 064f79d61..5429a3473 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -34,11 +34,7 @@ React は、ブラウザ組み込みのすべての [HTML](https://developer.moz ## リソース・メタデータ関連コンポーネント {/*resource-and-metadata-components*/} -<<<<<<< HEAD 以下のブラウザ組み込みコンポーネントを用いて、外部リソースを読み込んだり、ドキュメントにメタデータを付与したりすることができます。 -======= -These built-in browser components let you load external resources or annotate the document with metadata: ->>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 * [``](/reference/react-dom/components/link) * [``](/reference/react-dom/components/meta) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 10415c05b..f1708c84d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -14,17 +14,10 @@ React リファレンスは機能別にいくつかのサブセクションに プログラムから利用する React の機能です。 -<<<<<<< HEAD * [フック](/reference/react/hooks) - コンポーネント内から使用する様々な React の機能 * [コンポーネント](/reference/react/components) - JSX 内で用いる組み込みコンポーネント * [API](/reference/react/apis) - コンポーネントの定義に用いる API * [ディレクティブ](/reference/rsc/directives) - React Server Components 互換のバンドラに与えるための指示情報 -======= -* [Hooks](/reference/react/hooks) - Use different React features from your components. -* [Components](/reference/react/components) - Built-in components that you can use in your JSX. -* [APIs](/reference/react/apis) - APIs that are useful for defining components. -* [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components. ->>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 ## React DOM {/*react-dom*/} diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index f9e1b2ea3..58fd332a5 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -67,7 +67,7 @@ function Tooltip() { * `useLayoutEffect` 内のコードと、そこでスケジュールされたすべての state 更新は、**ブラウザによる画面の再描画をブロックします**。過度に使用すると、アプリが遅くなります。可能な限り [`useEffect` を使用してください](/reference/react/useEffect)。 -* If you trigger a state update inside `useLayoutEffect`, React will execute all remaining Effects immediately including `useEffect`. +* `useLayoutEffect` 内で state の更新をトリガすると、React は `useEffect` も含む残りのエフェクトをすべて即座に実行します。 --- diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 1f885de56..acf778a54 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -41,11 +41,7 @@ function TodosApp() { #### 引数 {/*parameters*/} -<<<<<<< HEAD -* `subscribe`: ストアにサブスクライブを開始し、また callback 引数を受け取る関数。ストアが変更された際に渡された callback を呼び出す必要があります。これにより、コンポーネントが再レンダーされます。`subscribe` 関数は、サブスクリプションをクリーンアップする関数を返す必要があります。 -======= -* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`, which will cause React to re-call `getSnapshot` and (if needed) re-render the component. The `subscribe` function should return a function that cleans up the subscription. ->>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 +* `subscribe`: ストアにサブスクライブを開始し、また callback 引数を受け取る関数。この関数はストアが変更された際に渡された callback を呼び出す必要があります。これにより React は `getSnapshot` を呼び出し、(必要に応じて)コンポーネントを再レンダーします。`subscribe` 関数は、サブスクリプションをクリーンアップする関数を返す必要があります。 * `getSnapshot`: コンポーネントが必要とするストアにあるデータのスナップショットを返す関数。ストアが変更されていない場合、`getSnapshot` への再呼び出しは同じ値を返す必要があります。ストアが変更されて返された値が([`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) で比較して)異なる場合、React はコンポーネントを再レンダーします。