🤔VueとReactの最終検討 @20210803
2021-08-03
-
Web Components(Web標準)の存在
- 数年経てばかなり普及した標準となるはず。
- それでも少し冗長な手続き型の書き方なのでフレームワークはまだまだ必要
- なのでコレの存在は理由にならない
-
CSSに対する取り扱い
-
Reactを使う場合、CSS in JS、CSS Modules、Styled-componentsが主流
- これらはとても優れた考え方だけど、どれが本流になるのか、書き出し時にどうなるのかが把握しきれない
- BEMで底に達した問題を探す問題のために生まれる問題
- styled-componentsへの最近の感想
-
Vueの場合、SCSSは使うがテンプレートファイル内にScopedで標準に近い形で記述することが出来る
- (逆にScopedがなくなった場合に破綻することにかもしれない)
-
CSSは最終的にはやはりPure CSSとして扱わなければいけない
-
できるだけ標準に近い形+d便利な方を使いたい
-
-
Reactを使う場合、CSS in JS、CSS Modules、Styled-componentsが主流
-
JSXとテンプレート
- 正直JSXの方がリッチな表現には使いやすい
-
VueもJSXのBabelプラグインが有るので普通に使えば良い
- ※JSX + JESTはひと手間必要 Nuxt.jsでTypeScriptとJSXとJest
-
書き心地
- Reactのほうが業務的なコードを書いている気分になった
- 多分コレはJSXと純粋な関数によるものだと思う
- Vue Composition APIとJSXを使えば同じ
-
エコシステム
-
React
- ReactのFacebookは強い
- NextのVercelも強い(機能的に)
- Reactのプロユースも強い(Vue→Reactは聞くが、React→Vueはあまり聞かない)
- これもComposition APIによるTypescriptサポートで変わると思う
-
Vue
- VueもNuxtも企業が引っ張る形じゃないOSSなのが少し心配
- Vueは公式が周辺ライブラリのサポートをしているのが強い
-
VueもReactも近い存在になった今、ReactからVueに乗り換えるモチベーションは無いのではないか
- FacebookのReactが廃れることは考えにくい
- そうなるとVueは廃れていくのではないか...
-
React
-
ライフサイクル(HookとComposition API限定)
-
Vue
-
onMounted``onUnMounted``onDestoryなど割とわかりやすい
-
-
React
-
副作用があるコードは
useEffectで毎回レンダー時に呼ばれる -
[]を参照として渡すことで、mountとunmount時の1回ずつ呼ぶことが出来る
-
副作用があるコードは
-
Vue
-
Vueの駄目なとこ
-
componentsをimportして、更に
components:{...}で登録しないといけない-
結局
import,登録,使用の3回書くことになる→選択肢は色々ある（公式参照）
-
結局
-
jsxが標準じゃない -
propsにrequiredが必要→Typescriptの領分
-
componentsをimportして、更に
- 両方触ってみた感想
- 結論
ReactとVueの比較(2021)React・VueなどのJS系フレームワークとJS・jQueryは何が違うのかマイクロフロントエンド(SPA)👀本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった
ReactBEMを始めとした手法はReactやVueには不向き(不要)Container・PresentationalコンポーネントReact.Children.mapReactのconditional renderとdisplay noneの違いReactのsetStateで設定した値を同期的に反映させるにはReactのuseCallBack地獄ReactのuseEffectでのアンマウント処理は普通の更新や遷移では発火しないReactのディレクトリ構造Reactの技術質問の想定reactでビューに状態（計算？）をもたせちゃいけない？reactで巨大なリストやグリッドの再描画問題state→❌️値を保持 ⭕️再レンダリングを引き起こす状態を保持「3種類」で管理するReactのState戦略行動規範の参考👀useCallbackはとにかく使え！ 特にカスタムフックでは📄Obsidianで使うタイトル用語集
月別アーカイブ