File tree 2 files changed +3
-3
lines changed
2 files changed +3
-3
lines changed Original file line number Diff line number Diff line change @@ -374,7 +374,7 @@ function delay(ms) {
374
374
375
375
サンドボックスプレビューをスクロールしてください。** 4 つのテストケース** が表示されていることに注意してください。それらはこのページの先ほどの例に対応しています。あなたの仕事は、` getFinalState ` 関数を実装して、それぞれのケースに対して正しい結果を返すことです。正しく実装すると、すべてのテストが通るはずです。
376
376
377
- 2 つの引数を受け取ることになります。` baseState ` は初期 state (例えば ` 0 ` )であり、` queue ` は数値(例えば ` 5 ` )または更新用関数(例えば ` n => n + 1 ` )のいずれかが、キューに入れられた順番で入っている配列です。
377
+ 2 つの引数を受け取ることになります。` baseState ` は初期 state(例えば ` 0 ` )であり、` queue ` は数値(例えば ` 5 ` )または更新用関数(例えば ` n => n + 1 ` )のいずれかが、キューに入れられた順番で入っている配列です。
378
378
379
379
あなたの仕事は、このページ内の表で見たような処理を行って、最終的な state を返すことです!
380
380
Original file line number Diff line number Diff line change @@ -73,7 +73,7 @@ state とレンダーの関係をもう少し詳しく見ていきましょう
73
73
74
74
[ 「レンダーする」] ( /learn/render-and-commit#step-2-react-renders-your-components ) とは、React があなたのコンポーネント(関数)を呼び出すということです。関数から返される JSX は、その時点での UI のスナップショットのようなものです。その JSX 内の props、イベントハンドラ、ローカル変数はすべて、** レンダー時の state を使用して計算されます** 。
75
75
76
- 写真や映画のフレームとは違い、返される「UI の スナップショット 」はインタラクティブです。イベントハンドラのような、入力に対する応答を指定するためのロジックが含まれています。React は画面をこのスナップショットに合わせて更新し、イベントハンドラを接続します。その結果として、ボタンを押すと JSX に書いたクリックハンドラがトリガされます。
76
+ 写真や映画のフレームとは違い、返される「UI のスナップショット 」はインタラクティブです。イベントハンドラのような、入力に対する応答を指定するためのロジックが含まれています。React は画面をこのスナップショットに合わせて更新し、イベントハンドラを接続します。その結果として、ボタンを押すと JSX に書いたクリックハンドラがトリガされます。
77
77
78
78
React がコンポーネントを再レンダーする際には:
79
79
@@ -252,7 +252,7 @@ setTimeout(() => {
252
252
253
253
アラートが実行される時点では React に格納されている state は既に更新されているかもしれませんが、アラートはユーザがボタンを操作した時点での state のスナップショットを使ってスケジューリングされました!
254
254
255
- イベントハンドラのコードが非同期であっても、** レンダー内の state 変数の値は決して変わりません** 。* そのレンダーの* ` onClick ` 内では、` setNumber(number + 5) ` が呼ばれた後も ` number ` の値は ` 0 ` のままです。その値は React があなたのコンポーネントを呼び出して UI の「スナップショットを取った」時に、「固定」されたのです。
255
+ イベントハンドラのコードが非同期であっても、** レンダー内の state 変数の値は決して変わりません** 。* そのレンダーの* ` onClick ` 内では、` setNumber(number + 5) ` が呼ばれた後も ` number ` の値は ` 0 ` のままです。その値は React があなたのコンポーネントを呼び出して UI の「スナップショットを取った」時に、「固定」されたのです。
256
256
257
257
ここで、このお陰でタイミングにまつわる問題が起きづらくなっている、という例をお示しします。以下のフォームは、5 秒の遅延後にメッセージを送信します。ここでこんなシナリオを想像してみてください:
258
258
You can’t perform that action at this time.
0 commit comments