reactで巨大なリストやグリッドの再描画問題
2021-01-01
-
Reactのspreadsheetがあれば参考に見る
-
https://zenn.dev/kazunori_kimura/scraps/9574500eb835ff の人が作った https://github.com/nadbm/react-datasheet 見てみたけどめちゃめちゃ重い
- 30行なら普通だけど100だと少し違和感が出て、300になるともうだめ
-
https://zenn.dev/righ/articles/ab4033f6d7787a の https://docs.walkframe.com/products/react-gridsheet/examples/ は全然重くない
-
なんで？
-
ウィンドウを自分で定義して、描画範囲外に出たら破棄してるから
- ウィンドウの高さをほぼ無制限にしてみたら順当に重くなった
-
ウィンドウを自分で定義して、描画範囲外に出たら破棄してるから
-
どうやって？
- react-windowが原因っぽい
-
表示領域に応じてレンダリングするコンポーネントを制限している
- 実質ウィンドウサイズと表示ウィンドウサイズを同じにすれば、これでなんか解決するんじゃないか？
-
なんで？
-
https://zenn.dev/kazunori_kimura/scraps/9574500eb835ff の人が作った https://github.com/nadbm/react-datasheet 見てみたけどめちゃめちゃ重い
ReactBEMを始めとした手法はReactやVueには不向き(不要)Container・PresentationalコンポーネントReact.Children.mapReactとVueの比較(2021)Reactのconditional renderとdisplay noneの違いReactのsetStateで設定した値を同期的に反映させるにはReactのuseCallBack地獄ReactのuseEffectでのアンマウント処理は普通の更新や遷移では発火しないReactのディレクトリ構造Reactの技術質問の想定React・VueなどのJS系フレームワークとJS・jQueryは何が違うのかreactでビューに状態（計算？）をもたせちゃいけない？state→❌️値を保持 ⭕️再レンダリングを引き起こす状態を保持「3種類」で管理するReactのState戦略マイクロフロントエンド(SPA)行動規範の参考👀useCallbackはとにかく使え！ 特にカスタムフックでは👀本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった📄Obsidianで使うタイトル用語集🤔VueとReactの最終検討 @20210803
月別アーカイブ