Reactの描画原理を探るVirtual DOMとFiber：Reactを理解して使う1日目

• 実DOM
  ：ブラウザーが画面を描くための本物の設計図です。変更には時間や資源のコストがかかります。
• Virtual DOM
  ：実DOMの軽量なコピーです。メモリー内で素早く生成・変更できます。建物を作る前の模型のようなものです。

• Diffing
  ：新旧のVirtual DOMを比較する過程です。素早く処理できるよう最適化されています。
• Reconciliation
  ：変更を実DOMへ反映し、最小限の作業で画面を更新する過程です。

1. 異なる型のノード
   タグ名が<div>と<span>のように異なる場合や、型が<LoginButton>と<LogoutButton>のように異なる場合、古いツリーを破棄して新しいものへ置き換えます。
2. 同じ型のDOM要素
   両方が<div>なら、属性だけを比べ、変更箇所だけ更新します。classNameやstyleだけが変われば、それだけを反映します。
3. 同じ型のコンポーネント
   両方が<Button>ならインスタンスを維持し、stateとpropsを更新します。そして内部の再調整を進めます。
4. リストとkey
   複数の子要素は基本的に順番で比較しますが、途中の追加・削除で無駄が生じます。特別なkeyで各要素を一意に識別すると、速く正確に変更を見つけられます。このkeyは後で詳しく説明します。

再調整の流れ

const todoItems = todos.map((todo) =>
  <li>{todo.text}</li>
);

[
  { id: 1, text: '장보기' },
  { id: 2, text: '운동하기' }
]

<ul>
  <li>장보기</li>
  <li>운동하기</li>
</ul>

[
  { id: 3, text: '책 읽기' }, // 새로 추가
  { id: 1, text: '장보기' },
  { id: 2, text: '운동하기' }
]

1. 以前の<li>장보기</li>と現在の<li>책 읽기</li>は内容が違うため、買い物を読書へ更新します。
2. 以前の<li>운동하기</li>と現在の<li>장보기</li>は違うため、運動を買い物へ更新します。
3. 新たな<li>운동하기</li>を末尾へ追加します。

const todoItems = todos.map((todo) =>
  <li key={todo.id}>{todo.text}</li> // key 속성 추가
);

1. keyが3の読書が、新しく加わったと分かります。
2. keyが1の買い物と、keyが2の運動は変わらず、内容の変更もないと分かります。

const [items, setItems] = useState(['A', 'B', 'C']);
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

• index 0の値はAからCへ変わっても、
• 同じkey = 0
  として、既存DOMを再利用します。

• 誤った内容の表示
• フォームの初期化エラー
• アニメーションの不具合
• 不要なDOM更新

const items = [
  { id: 'a1', name: 'A' },
  { id: 'b2', name: 'B' },
  { id: 'c3', name: 'C' },
];
return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

• 項目が絶対に変わらない
• 静的なリストで、一意なIDを持てない
• ['월', '화', '수']のような、短く変化しない単純なリスト

import React from 'react';
function MyApp() {
  return (
    <React.StrictMode>
      <ComponentOne />
      <ComponentTwo />
    </React.StrictMode>
  );
}

import { startTransition } from 'react';
 
function handleClick() {
  startTransition(() => {
    setState(newState);
  });
}
 
// ... <button onClick={handleClick}>Update State</button>

次回は、基本的な状態管理手段であるuseStateの内部動作を詳しく見ていきます。

• React公式ドキュメント：Reconciliation：https://reactjs.org/docs/reconciliation.html↗
• React公式ドキュメント：Fiber Architecture：専用の説明ページはありませんが、関連概念が各所に説明されています。
• React Blog：React v16.0：https://reactjs.org/blog/2017/09/26/react-v16.0.html↗：Fiberの導入
• React Blog：React v18.0：https://reactjs.org/blog/2022/03/29/react-v18.html↗：Concurrent Featuresの紹介