はじめに
Canvasに少し慣れて来た。
今回はuseEffectで出来ました。
再読込すると迷路が書き換わります。 棒倒し法と言うアルゴリズムだそうです。
実行例
See the Pen react-maze by kalz2q (@kalz2q) on CodePen.
解説
Reactのhookの使い方ですが、リアルタイムに書き換える場合は前回のようにuseRefを使う。
そうでなく、今回のように静的なCanvasに図形を置きたい場合はuseEffectでCanvasを用意して、useEffectの中で図形を描く。
と言うことなのかな、と言うのが現在の理解です。
あとTypeScriptがnullを含む型をエラーにするので本当はifで切り出さなければいけないのだろうけど、anyで受けると大丈夫なので邪道だけど便利です。
