React+Canvas
1
Path2D
useRefで生のCanvasを掴んで書き込んでいる
2
useStateでユーザの操作ログを持つ
3
クリック時に直接描く代わりに、useEffectで描いている
setXで状態が更新されるのでrenderが走り、useEffectが呼ばれる
全てのクリックを描き直しているので性能問題が出るのでは？
>In the current implementation every render first clears the canvas and then draws all the locations. We could be smarter than that, but to keep it simple I’ll leave it to reader to further optimize this.
>drawing on the canvas is a side effect determined by the app state
Clearは履歴の削除、Undoはsliceに相当する
localStorage
履歴を保存するだけ
カスタムフックで状態の永続化のためのフックを束ねる
Related Pages
- →マルチエージェント協調×React×agentic_retrieval-augmented_generation:_a_survey_on_agentic_rag×retrieval-augmented_generation×rag→
- →server-side_rendering×ssr×cgi×ruby_on_rails×django×React×vue.js×シングルページアプリケーション×spa×open_graph_protocol×isr×ssg→
- →regroup×pregroup-done-2019×2020 年、 React 軸で学ぶべき技術×TypeScript×React×webpack×visual_studio_code×styled-components×ReactModal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]