ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside

こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します

[mizdra]

無茶苦茶面白い。React.Portal こうやって使うこともできるんだなー。

[yarumato]

“Reactの再レンダリングを防ぐには様々な手段がある。react-reverse-portal を参考に簡易な実装でページ間の遷移がだいぶスムーズに。結局Reactの世界から離れて生のDOM動作したが、コード全体変更が少なく、いい結果に”