Reactのイベントシステム：SyntheticEventとは何か

// 1. コンポーネントのonClickはFiberに「ハンドラ」として保存されるだけ
// 実際のDOMへのaddEventListenerはしない

// 2. ルートに取り付けた1つのリスナーがすべてのイベントを受け取る
rootElement.addEventListener('click', reactEventHandler);

// 3. reactEventHandlerの内部処理（概略）
function reactEventHandler(nativeEvent) {
  // a. イベントが発生した実際のDOM要素を取得
  const nativeTarget = nativeEvent.target;
  
  // b. そのDOMからFiberノードを逆引き
  const targetFiber = getFiberFromDom(nativeTarget);
  
  // c. Fiberツリーを上に辿りながらonClickを探す
  let fiber = targetFiber;
  while (fiber !== null) {
    if (fiber.pendingProps.onClick) {
      // d. SyntheticEventを作成してハンドラを呼び出す
      const syntheticEvent = createSyntheticEvent(nativeEvent);
      fiber.pendingProps.onClick(syntheticEvent);
    }
    fiber = fiber.return; // 親へ
  }
}

// マイクロフロントエンド：同一ページに複数のReactアプリ
// React 16の問題：どちらのReactが先にdocumentでキャッチするかで干渉

// アプリA（React 16）
const rootA = document.getElementById('app-a');
ReactDOM.render(<AppA />, rootA);
// → document.addEventListener('click', handlerA)

// アプリB（React 16）- 別バージョンのReact
const rootB = document.getElementById('app-b');
ReactDOM.render(<AppB />, rootB);
// → document.addEventListener('click', handlerB)

// 問題：AppBのコンポーネントがe.stopPropagation()を呼ぶと
//       AppAのdocumentリスナーまでイベントが届かなくなる！

// React 17の解決策：
const rootA = document.getElementById('app-a');
ReactDOM.createRoot(rootA).render(<AppA />);
// → rootA.addEventListener('click', handlerA)

// AppBのstopPropagationはrootAのリスナーに影響しない

function FileDropZone() {
  const handleDrop = (syntheticEvent) => {
    syntheticEvent.preventDefault();
    
    // SyntheticEventにはdataTransferが含まれているが...
    // 場合によってはnativeEventから取得する必要がある
    const files = syntheticEvent.nativeEvent.dataTransfer.files;
    
    // ファイルを処理
    Array.from(files).forEach(file => {
      processFile(file);
    });
  };
  
  return (
    <div onDrop={handleDrop} onDragOver={e => e.preventDefault()}>
      ファイルをここにドロップ
    </div>
  );
}

// nativeEventが必要な別の例：PassiveEventListenerオプション
// ReactのonScrollはpassiveオプションをサポートしていない場合がある
useEffect(() => {
  const element = ref.current;
  const handler = (e) => { /* スクロール処理 */ };
  
  // passiveオプション付きのネイティブリスナーを直接追加
  element.addEventListener('scroll', handler, { passive: true });
  return () => element.removeEventListener('scroll', handler);
}, []);