@inlet/react-pixi
React で PixiJS を扱うライブラリ。
React で PixiJS を扱うには他にメンテナンスされている中で react-pixi-fiber があるが、こっちは触ったことがないので個人的に比較できない……。
Fleur を使って状態管理する
React PIXI は Fiber を内部実装しており、<Stage /> 以下は独立した Fiber になる。注意が必要。
例えば Fleur を使っているときに React DOM と React PIXI でステートを共通化したい場合は以下のような JSX を書く必要がある。 code: (jsx)
return (
<FleurContext value={context}>
<main>
<Stage width={800} height={600}>
<FleurContext value={context}>
<Player />
</FleurContext>
</Stage>
</main>
</FleurContext>
);
また Fleur は今のところ React DOM での使用が想定されているため requestAnimationFrame のタイミングでバッチアップデート(unstable_batchedupdates)される処理になっている。React PIXI の useTick Hooks を View 側で使った場合に二重フレームを使ってしまう問題がある。対応してもらっている最中。