質問編集履歴
8
追記本文修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
|
|
299
299
|
[サンプル2](https://codesandbox.io/s/empty-bird-vzdtp?fontsize=14&hidenavigation=1&theme=dark)
|
|
300
300
|
|
|
301
|
-
追記前の2つのサンプルは子コンポーネント
|
|
301
|
+
追記前の2つのサンプルは子コンポーネントで親テキストフィールドをリセットしていますが、親コンポーネントでuseEffectを利用し、親コンポーネントで親テキストフィールドをリセットするようにしました。
|
|
302
302
|
|
|
303
303
|
```jsx
|
|
304
304
|
|
7
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
|
|
323
323
|
|
|
324
324
|
|
|
325
|
-
入力されたテキストの正誤を判定する方法につきまして、チェックボタンをテキストフィールドコンポーネントに含める方法しか思いつかなかったため、テキストフィールドのonChangeの度にチェックボタも再レンダーされます。
|
|
325
|
+
入力されたテキストの正誤を判定する方法につきまして、チェックボタンをテキストフィールドコンポーネントに含める方法しか思いつかなかったため、テキストフィールドのonChangeの度にチェックボタンも再レンダーされます。
|
|
326
326
|
|
|
327
327
|
|
|
328
328
|
|
6
サンプル2追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -289,3 +289,41 @@
|
|
|
289
289
|
|
|
290
290
|
|
|
291
291
|
理想ですが、基本的にレンダーは初回の一回だけ、再レンダーが必要な要素のみ別個に何かしらの処理、という形にしたいです。
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
【追記】親テキストフィールドを子で操作しない場合のサンプル
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
[サンプル2](https://codesandbox.io/s/empty-bird-vzdtp?fontsize=14&hidenavigation=1&theme=dark)
|
|
300
|
+
|
|
301
|
+
追記前の2つのサンプルは子コンポーネントのアンマウント時に親テキストフィールドをリセットしていますが、親コンポーネントでuseEffectを利用し、親コンポーネントで親テキストフィールドをリセットするようにしました。
|
|
302
|
+
|
|
303
|
+
```jsx
|
|
304
|
+
|
|
305
|
+
useEffect(() => {
|
|
306
|
+
|
|
307
|
+
if (!open) setParentText("");
|
|
308
|
+
|
|
309
|
+
}, [open]);
|
|
310
|
+
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
|
|
315
|
+
また、親子ともテキストフィールドを別のコンポーネントに切り分け、切り分けたコンポーネント内でテキストフィールドのstateを管理するようにしました。
|
|
316
|
+
|
|
317
|
+
これにより、再レンダー適用部分がテキストフィールドコンポーネントのみになりました。
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
#### サンプル2の問題点
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
入力されたテキストの正誤を判定する方法につきまして、チェックボタンをテキストフィールドコンポーネントに含める方法しか思いつかなかったため、テキストフィールドのonChangeの度にチェックボタも再レンダーされます。
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
また、子コンポーネントのアンマウント時に親テキストフィールドコンポーネントが2回レンダーされてしまいます。
|
5
追記削除
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -289,27 +289,3 @@
|
|
|
289
289
|
|
|
290
290
|
|
|
291
291
|
理想ですが、基本的にレンダーは初回の一回だけ、再レンダーが必要な要素のみ別個に何かしらの処理、という形にしたいです。
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
【追記】親テキストエリアのリセットを親で行う場合のサンプル
|
|
296
|
-
|
|
297
|
-
---
|
|
298
|
-
|
|
299
|
-
[親でリセットサンプル](https://codesandbox.io/s/empty-bird-vzdtp?fontsize=14&hidenavigation=1&theme=dark)
|
|
300
|
-
|
|
301
|
-
useEffectを使用し、親テキストエリアのリセットを子コンポーネントで行わないようにしました。
|
|
302
|
-
|
|
303
|
-
```jsx
|
|
304
|
-
|
|
305
|
-
useEffect(()=>{
|
|
306
|
-
|
|
307
|
-
if(!open) setParentText("");
|
|
308
|
-
|
|
309
|
-
},[open])
|
|
310
|
-
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
最初のサンプルとの挙動の差異として、子をアンマウントした後、親が続けざまに2回レンダーされます。
|
|
314
|
-
|
|
315
|
-
|
4
本文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -310,6 +310,6 @@
|
|
|
310
310
|
|
|
311
311
|
```
|
|
312
312
|
|
|
313
|
-
最初のサンプルとの差異として、子をアンマウントした後、親が続けざまに2回レンダーされます。
|
|
313
|
+
最初のサンプルとの挙動の差異として、子をアンマウントした後、親が続けざまに2回レンダーされます。
|
|
314
314
|
|
|
315
315
|
|
3
サンプル追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -289,3 +289,27 @@
|
|
|
289
289
|
|
|
290
290
|
|
|
291
291
|
理想ですが、基本的にレンダーは初回の一回だけ、再レンダーが必要な要素のみ別個に何かしらの処理、という形にしたいです。
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
【追記】親テキストエリアのリセットを親で行う場合のサンプル
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
[親でリセットサンプル](https://codesandbox.io/s/empty-bird-vzdtp?fontsize=14&hidenavigation=1&theme=dark)
|
|
300
|
+
|
|
301
|
+
useEffectを使用し、親テキストエリアのリセットを子コンポーネントで行わないようにしました。
|
|
302
|
+
|
|
303
|
+
```jsx
|
|
304
|
+
|
|
305
|
+
useEffect(()=>{
|
|
306
|
+
|
|
307
|
+
if(!open) setParentText("");
|
|
308
|
+
|
|
309
|
+
},[open])
|
|
310
|
+
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
最初のサンプルとの差異として、子をアンマウントした後、親が続けざまに2回レンダーされます。
|
|
314
|
+
|
|
315
|
+
|
2
サンプル修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
サンプルをご確認いただけますでしょうか。
|
|
6
6
|
|
|
7
|
-
[サンプル](https://codesandbox.io/s/di
|
|
7
|
+
[サンプル](https://codesandbox.io/s/admiring-khorana-7tpko?fontsize=14&hidenavigation=1&theme=dark)
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
|
|
241
241
|
[useMemo](https://ja.reactjs.org/docs/hooks-reference.html#usememo)を使用することで、ヘッダーコンポーネントの再レンダーは防げました。
|
|
242
242
|
|
|
243
|
-
[ヘッダーを再レンダーしないサンプル](https://codesandbox.io/s/
|
|
243
|
+
[ヘッダーを再レンダーしないサンプル](https://codesandbox.io/s/tender-night-fipux?fontsize=14&hidenavigation=1&theme=dark)
|
|
244
244
|
|
|
245
245
|
```jsx
|
|
246
246
|
|
1
本文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -284,6 +284,8 @@
|
|
|
284
284
|
|
|
285
285
|
例えばヘッダーの他に本文や画像などを含むコンポーネントで、再レンダーの必要がある要素と必要が無い要素が入り組んでいる場合は、上記のようなメモ化する方法は効率的ではないかと思います。
|
|
286
286
|
|
|
287
|
-
|
|
287
|
+
また、仮にコンポーネントや要素をメモ化したとしても、コンポーネントの背景に画像やグラデーションなどを設定している場合はそれらも再レンダーされてしまいます。
|
|
288
|
-
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
289
|
-
理想
|
|
291
|
+
理想ですが、基本的にレンダーは初回の一回だけ、再レンダーが必要な要素のみ別個に何かしらの処理、という形にしたいです。
|