ReactとVueの比較(2021)

2021-01-01

調べてまとめたもの
- ReactはJavascriptの力を最大限に発揮する
  - 純粋なJavascriptオブジェクトを扱うため、TSやLint等による補完や解析が強力
  - ReactはJSでDOMを組み立てる
  - どこまで行ってもJSなのでテストやリファクタがプログラミング的に解決出来る
- Vueは冗長な記述なしに、「HTMLとCSS」を中心としたWeb開発にリアクティブな状態を埋め込める
  - VueはDomにJSを連結させる
  - 「すでにHTMLがある状態で何かをする」という目的ではVue.jsが適しています。(脱jQueryのためにしたことより)
自分の解釈
- Vueは
  - 独自記法やSPAやライフサイクルを学ぶ必要はあるけど、マークアップ的な従来なフロントエンドの思考のままステップアップできる
- Reactは
  - それらに加えて[宣言的]にDOMを構築するという思考に切り替えないといけない
    - →これが結構ハードル高い
- Reactは
  - componentをちゃんとわけないと逆にわかりにくい
  - だからcomponent設計を強要される
    - そんな事無いかも。普通に大きく作ろうとすれば作れる
- Vueは
  - 1つのcomponentで無理やり作っても割と作れてしまう
  - 逆に大きくなると破綻しやすそう
結局どっちを選ぶのか？
- Vue(Nuxt)
  - Vueを使うことを妥協や技術力が無いという思い込みをやめる
  - 構造が最初から用意されていて、データや処理で中身が変わるのがWEBだと（僕は）思う
    - 現代（とは）のWEBはそうでないのかもしれないが、Vueの方が自然
      - ドキュメント自体のWEBの考え方
      - UnityやCanvasとかはCodeでビジュアルつくってるけど、React(jsx)も同じでは
- React
  - React NativeがReactを選ぶ理由ならやめる
  - Flutterかネイティブのほうが良い
参考

React BEMを始めとした手法はReactやVueには不向き(不要)Container・Presentationalコンポーネント React.Children.map Reactのconditional renderとdisplay noneの違い ReactのsetStateで設定した値を同期的に反映させるには ReactのuseCallBack地獄 ReactのuseEffectでのアンマウント処理は普通の更新や遷移では発火しない Reactのディレクトリ構造 Reactの技術質問の想定 React・VueなどのJS系フレームワークとJS・jQueryは何が違うのか reactでビューに状態（計算？）をもたせちゃいけない？reactで巨大なリストやグリッドの再描画問題 state→❌️値を保持　⭕️再レンダリングを引き起こす状態を保持「3種類」で管理するReactのState戦略マイクロフロントエンド(SPA)行動規範の参考 👀useCallbackはとにかく使え！　特にカスタムフックでは 👀本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった 📄Obsidianで使うタイトル用語集 🤔VueとReactの最終検討 @20210803