はじめに
Reactにおけるレンダリングについて、改めて復習をしたのでその備忘録をまとめます。
初学者ゆえ、誤った記載があればご指摘いただけると幸いです。
Reactアプリのコンポーネント描写の流れ
Reactのアプリケーションにおいて、画面の更新は以下の3ステップを経て行われる。
- トリガー
- レンダー
- コミット
1.トリガー
画面の更新をする際には、きっかけ(トリガー）が必要。
Reactにおいてはこのトリガーは大きく分けて2種類ある。
-
初回のレンダリング
初めてアプリが表示される時にトリガーが発動する。
Reactがコンポーネントに対して初回描写を支持して、画面表示がされる。 -
コンポーネントのstate更新
初回レンダリングが実施された後は、以下のケースをトリガーとして画面更新がされる。
- Stateの値が更新された時
- 渡されたpropsの値が変更された時
- 親コンポーネントが際描写された時
これらをトリガーとして、Reactがコンポーネントに更新指示を出す。
レンダー
レンダーとは、Reactがコンポーネントを呼び出すことと定義される。
つまり、トリガーで受け取った内容を元にコンポーネントを呼び出して、画面に表示する内容を把握するということ。
(どのような内容が反映されるべきなのか、差分を確認する)
- 初回レンダー時：Reactはrootコンポーネントを呼び出す。
- 2回目以降のレンダー時： stateの値の更新によって、トリガーされた関数コンポーネントを呼び出す。
※コンポーネントの階層が入れ子になっている場合は、ネストされるコンポーネントがなくなるまでレンダリングが続く。
なお、レンダーのタイミングではDOMの更新は行われず、あくまで差分のチェックのみが実施される。
コミット
コンポーネントを呼び出した後、ReactがDOMを変更することをコミットという。
- 初回レンダー時：作成したすべてのDOMノードを画面上に描写する
- 2回目以降のレンダー：最新のレンダー出力に合わせて、最小限の変更点のみDOMに反映する。
参考
補足：Stateの値更新時の注意点
以下のようにカウントボタンをクリックして、stateで管理をしているcountの値を更新するプログラムがあった場合、handleClick関数内で2回setCount(count + 1);の処理を実行しても、countは1つしか増えない。
import { useState } from 'react';
export default function CountNum() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
};
return (
<>
<button onClick={handleClick}>カウント</button>
<p>{count}回、クリックされました。</p>
</>
);
}
値が2つずつ増えないのは、Reactが非同期にStateを更新するから。
Stateに新しい値が更新されるのは、イベントハンドラーの処理が終わった後であるため、handleClick関数内でcountの値が更新されることはない。
そのため、関数内ではcountの値が更新されず、加算が1回しかされない。
常に新しい値で演算をするためには、set関数に関数型の引数を渡して演算する。
例
set〇〇(現在のstate値 => 更新のための式)
先ほどの例の場合だと、handleClick関数内を以下のように記載する。
const handleClick = () => {
setCount(c => c + 1);
setCount(c => c + 1);
};