Skip to content

Commit

Permalink
Resolve conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
smikitky committed Sep 22, 2024
1 parent 725b63c commit 31e3471
Show file tree
Hide file tree
Showing 6 changed files with 4 additions and 29 deletions.
6 changes: 1 addition & 5 deletions src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,7 @@ export default function PackingList() {
</Sandpack>
<<<<<<< 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)を使って、以下のように書くことができます。
Expand Down
8 changes: 1 addition & 7 deletions src/content/learn/you-might-not-need-an-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 の調整を終わらせる方が良いでしょう。
Expand Down
4 changes: 0 additions & 4 deletions src/content/reference/react-dom/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

* [`<link>`](/reference/react-dom/components/link)
* [`<meta>`](/reference/react-dom/components/meta)
Expand Down
7 changes: 0 additions & 7 deletions src/content/reference/react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useLayoutEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` も含む残りのエフェクトをすべて即座に実行します。
---
Expand Down
6 changes: 1 addition & 5 deletions src/content/reference/react/useSyncExternalStore.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 はコンポーネントを再レンダーします。
Expand Down

0 comments on commit 31e3471

Please sign in to comment.