File tree 1 file changed +4
-4
lines changed
src/content/reference/react
1 file changed +4
-4
lines changed Original file line number Diff line number Diff line change @@ -1288,9 +1288,9 @@ export const LevelContext = createContext(0);
1288
1288
1289
1289
---
1290
1290
1291
- ### オブジェクトと関数を渡すときの再レンダーの最適化 {/*optimizing-re-renders-when-passing-objects-and-functions*/}
1291
+ ### オブジェクトや関数を渡すときの再レンダーの最適化 {/*optimizing-re-renders-when-passing-objects-and-functions*/}
1292
1292
1293
- あなたはコンテクストを介して任意の値を渡すことができます、オブジェクトや関数を含みます 。
1293
+ コンテクストを介して、オブジェクトや関数を含んだどんな値も渡すことができます 。
1294
1294
1295
1295
` ` ` js [[2 , 10 , " { currentUser, login }" ]]
1296
1296
function MyApp () {
@@ -1309,9 +1309,9 @@ function MyApp() {
1309
1309
}
1310
1310
` ` `
1311
1311
1312
- ここでは、<CodeStep step={2}>context value</CodeStep> は 2 つのプロパティを持つ JavaScript オブジェクトで 、そのうちの 1 つは関数です 。` MyApp` が再レンダーされるたびに (例えば、ルートの更新時など )、これは*異なる*オブジェクトを指し、*異なる*関数を指しますので、 ` useContext (AuthContext)` を呼び出すツリー内のすべてのコンポーネントも再レンダーしなければなりません 。
1312
+ ここでは、<CodeStep step={2}>context value</CodeStep> は、 2 つのプロパティを持つ JavaScript のオブジェクトで 、そのうちの 1 つは関数になります 。` MyApp` が再レンダーされる度に (例えば、ルート更新など )、これは*異なる*オブジェクトを指し、*異なる*関数を指すため、React はツリーにある ` useContext (AuthContext)` を呼び出す、すべてのコンポーネントを再レンダーしなければなりません 。
1313
1313
1314
- 小規模なアプリケーションでは、これは問題ではありません。しかし、基礎となるデータ、例えば ` currentUser` が変更されていない場合、それらを再レンダーする必要はありません。その事実を活用するために、 React がそれを活用できるように 、` login` 関数を [` useCallback` ](/reference/react/useCallback) でラップし、オブジェクトの作成を [` useMemo` ](/reference/react/useMemo) でラップすることができます 。これはパフォーマンスの最適化です:
1314
+ 小規模なアプリでは、問題になりません。ですが、 ` currentUser` のような基礎となるデータが変更されていない場合、再レンダーする必要はありません。 React がその事実を最大限に活用できるように 、` login` 関数を [` useCallback` ](/reference/react/useCallback) でラップし、オブジェクトの生成を [` useMemo` ](/reference/react/useMemo) にラップすることができます 。これはパフォーマンスの最適化です:
1315
1315
1316
1316
` ` ` js {6 ,9 ,11 ,14 ,17 }
1317
1317
import { useCallback , useMemo } from ' react' ;
You can’t perform that action at this time.
0 commit comments