# React ライフサイクル — Five SDK

安定したホスト、遅延読み込み、キャンセル、サイズ監視、完全な破棄で Five SDK を React に統合します。

Canonical: https://developer.realsee.ai/ja/docs/five-sdk/react-lifecycle
Source: https://developer.realsee.ai/ja/docs/five-sdk/react-lifecycle.md
Language: ja

スターターは `createRoot` を使い、選択中のシーンにつき 1 つの SDK インスタンスを所有します。

<span id="start-with-the-working-component" class="docs-anchor-alias" aria-hidden="true"></span>

## 動作するコンポーネントから始める

[スターター](https://developer.realsee.ai/ja/docs/five-sdk/quickstart) の `src/Viewer.tsx` を開き、そのライフサイクルを既存 React アプリでも使います。コア SDK に専用 HOC やフレームワーク別描画器は不要です。

[クイックスタートに全ソース](https://developer.realsee.ai/ja/docs/five-sdk/quickstart#read-the-working-viewer) があります。別の UI フレームワークでは小さい [設置ヘルパー](https://developer.realsee.ai/ja/docs/five-sdk/load-a-scene#mount-and-dispose) も使えます。

<span id="preserve-these-boundaries" class="docs-anchor-alias" aria-hidden="true"></span>

## 境界を守る

1. ホストの作成後に effect 内で SDK を生成します。高さは 0 にしません。
2. WebGL はブラウザーで読み込み、SSR 中に生成しません。
3. Work を解決・解析してから読み込みます。Team 認証情報はローカルサーバーに保持します。
4. 選択変更・アンマウント後の古い完了通知を無視します。
5. 実コンテナーのサイズを監視し、レイアウト変更後に `refresh` します。
6. 終了時に通信を中断し、購読・サイズ監視を解除して SDK とレイヤーを破棄します。

React 開発用 Strict Mode では effect の設定・終了を複数回実行することがあります。再設置可能な新しいホストを残してください。破棄済みインスタンスや古いキャンバスの保持は不具合です。

<span id="do-not-copy-a-live-state-object" class="docs-anchor-alias" aria-hidden="true"></span>

## 実行中の状態を参照のままコピーしない

SDK の状態は Three.js ベクトルを含みます。シリアライズには [視点保存ヘルパー](https://developer.realsee.ai/ja/docs/five-sdk/camera-and-modes#save-and-restore-a-view) を使います。インスタンス参照は現在の effect に属し、破棄後に別コンポーネントへ流用しません。

<span id="check-the-result" class="docs-anchor-alias" aria-hidden="true"></span>

## 結果を確認する

設置・破棄・再設置、読み込み中のシーン交換、ウィンドウを変えない親要素のサイズ変更を試します。キャンバスは常に現在の 1 つだけとし、古いコールバックが新シーンを更新しないことを確認します。

拡張 SDK は公開 peer dependency に従います。次は [本番チェックリスト](https://developer.realsee.ai/ja/docs/five-sdk/production) へ進みます。