同じ簿記プロジェクトの開発におけるVueとReactの比較

プロジェクト

Lemon Bookkeepingは、以下の機能を備えたモバイルベースのローカル簿記プロジェクトです：

• 帳簿ページ：金額、ラベル、メモ、収支タイプの切り替え
• タグ管理：タグの追加、名前の変更、削除
• 統計ページ：データ表示、日別グループ化、収支タイプ切替
• 永続性: ページを閉じて再度開いてもデータは失われません。

クリックすると、Vueバージョンのプロジェクトをプレビューできます。 ください｜Reactバージョンのプロジェクトをプレビューするにはクリックしてください。

開発アプローチ

• リアクト版：
• Vue Edition: TypeScript + Single File Component + Vuex + Vue Router + Sass

Vue VS React データバインディング

Vue データ応答性

• vueは初期化時にすべての依存関係を収集し、データが変更されるとビューが自動的に追従します。
• プロジェクトのナンバーボードモジュールを例にとると、このモジュールの機能は次の通りです：数字のボタンをクリックしてキーイベントをトリガーし、ナンバーボードに表示される出力量を変更します。のthis.outputを直接変更することができ、Vueは自動的にビューレイヤーに更新します。

  

React useState

• reactのデータを変更するには、手動でsetStateメソッドを呼び出す必要があります。
• まずuseState()関数を呼び出して出力値を取得し、同時にsetOutputメソッドを取得します。データを変更する必要がある場合、手動でsetOutputメソッドを呼び出し、以前の値を新しい値で上書きする必要があります。

  

Vue VS React

Vue 単一ファイルコンポーネント

Vueでは、 テンプレート＋スクリプト＋スタイル（CSS）で構成される、拡張子.vueの単一ファイルコンポーネントが提供されています。同時に、VueではTypeScriptでクラスコンポーネントがサポートされていることを踏まえ、本プロジェクトでは クラスコンポーネント＋デコレータの アプローチで構築しています。単一ファイルコンポーネントの構造は以下の通りです：

<template>
 <div>
 <button class="btn" @click="onClick">Click!</button>
 </div>
</template>
<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'
// @Component モディファイアは、これがVueコンポーネントであることを指定する。
@Component({
 // すべてのコンポーネント・オプションは、ここに置くことができる
})
export default class MyComponent extends Vue {
 // 初期データは、インスタンスのプロパティとして直接宣言できる。
 message: string = 'Hello!'
 // コンポーネント・メソッドは、インスタンス・メソッドとして直接宣言することもできる。
 onClick (): void {
 window.alert(this.message)
 }
}
</script>
<style lang='scss' scoped >
 .btn{
 background:red;
 }
</style>

React 関数コンポーネント

Vueのトリプルとは異なり、ReactではすべてがJS(TS)であり、.tsxファイル内のtsで直接htmlタグを記述することができますし、関数コンポーネントも例外ではありません。

import React from "react";
const MyComponent: React.FC = (props) => {
 //属性
 const message = 'Hello!'
 // 
 const onClickHandler = () => {
 window.alert(message)
 }
 //コンポーネント・テンプレートは
 return (
 <div>
 <button onClick={onClickHandler}>Click!</button>
 </div>
 )
}
export default MyComponent;

Vue VS React 外部データプロップ

PropsはPropertyの略で、コンポーネントが外部データを取得するためのものです。

Vue Prop

• 従来のVueオブジェクトコンポーネントでは、propsオプションを使用して親コンポーネントから受信データを取得するのが一般的でした。このプロジェクトでは、クラスコンポーネントは外部データを取得するために **decorator @Prop()** を使用します。
• vue-property-decorator1.まず、サードパーティライブラリのPropデコレータを導入します。
• @Prop() readonly value!: number;2.デコレーター構文を使用して、変数名とデータ型を宣言します。
• 3.最後にthis.valueを通して外部データを取得します。

React Props

• Reactは "コンポーネント自体が関数である "ため、外部データはもちろん、パラメータの関数であり、このシンプルで明確なプログラミングの考え方は、Reactの中で最も特徴的なスタイルです。
• 1.Reactのデータは、入力パラメータのpropsオブジェクトに格納されます。TypeScriptでは、汎用的な<>を使ってpropsオブジェクトのデータ型を宣言できます。
• 2.そして、propsオブジェクトオブジェクトのプロパティを使って外部データを取得します。

  

Vue VS React CSS

Vue 単一ファイルコンポーネントのローカルスタイル

• <style></style>Vueの単一ファイルコンポーネントは、従来のフロントエンドのトリプルとしてフォーマットされているため、タグを介してコンポーネント内部にCSSを記述するのは簡単です（VueはSASS LESS Stylusなどをサポートしています）。
• 同時に、Vueにはscoped属性が用意されており、CSSの内容をコンポーネントの内部だけで動作させることができます。

<!-- scoped属性は、コンポーネント内のCSSコンテンツのローカライズを可能にする。>
<style lang="scss" scoped>
.numberPad {
 .output {
 /* ... */
 }
 .buttons {
 /* ... */
 }
 }
}
</style>

React styled-components スタイルタグ

• Reactのコンポーネント自体が関数であるため、Styleタグを使ってCSSを記述する方法がありません。 従来の方法では、CSSとコンポーネントを分離して.cssファイルに格納し、index.htmlファイルに導入していました。そうすることで、まず第一に、カットのスタイルとコンポーネントによって引き起こされます。第二に、CSSにはローカルスコープがなく、グローバルなクラス名の汚染が起こりやすいことです。
• この問題を解決するために、Reactで使用されるstyled-componentsは**テンプレート文字列 ``**の機能を利用して、関数コンポーネントにCSSスタイルを与え、クラス名にローカルスコープさせます。これにより、.JSX (.TSX) ファイルにスタイルを記述するのが簡単になります。

  

Vue VS React グローバルな状態管理

• グローバル状態管理とは、コンポーネントのデータとデータに関連する操作、つまりMVCモデルにおけるModel層を抽出し、カプセル化することです。このプロジェクトのVue版では、Vueの公式グローバル状態管理ライブラリであるVuexを使用し、React版ではグローバル状態管理のためのカスタムフックを使用しています。
• グローバルな状態管理における最も中心的な2つの概念は、状態をどのように保存するかということと、状態に対する操作をカプセル化するかということです。

Vue Vuex

Vuexは、Vuex.storeAPIを呼び出してStoreインスタンスを作成します。

• state: コンポーネントの状態。store.stateで状態オブジェクトを取得します。
• this.$store.commit("handler",payload)変異：状態を変更するためのメソッド。handler "はメソッドの名前で、ペイロードは入力されるパラメータです。this.$store.commit("handler",payload)handler "は文字列であるため、この変異を呼び出す際のコードヒントはなく、間違った書き方をした場合にTSが静的にエラーを検出することはありません。

  

  

React カスタムフック

• フック：「フック」とは「引っかける」という意味です。React Hooksとは、コンポーネントはできるだけ純粋な関数として記述し、外部関数や副作用が必要な場合は、フックを使って外部コードを「フック」することを意味します。例えば、useState、useEffect、useRefなどです。
• ReactのカスタムHookは、名前が "use "で始まる関数で、関数内から他のHookを呼び出すことができます。
• では、グローバルな状態管理にカスタムフックを使うにはどうすればいいのでしょうか？レコードの状態管理に関するプロジェクトでは、例としてuseRecordsを使用します：
  • useTags関数を作成します。
  • 2.useState関数を呼び出して、レコードの状態と変更されたuseRecordsの状態を宣言します。
  • 3.useEffect関数を呼び出して、レコードを初期化し、変更を監視します。
  • 4.useRecords内にcreateRecordメソッドを定義し、その中でuseRecordsを呼び出して状態を変更します。
  • 5.状態のレコードとメソッドcreateRecordをエクスポート用に公開します。
• レコードに対応するステートとメソッドを使用したい場合は、useRecords関数を呼び出し、struct構文を使用してステートとメソッドを取得するだけです。const { records,createRecords } = useRecords();

  

Vue VS React ルーター

vue-router

• vue-routerグローバルな設定方法です
• vue-routerはオブジェクト形式の設定しかサポートしていません。
• vue-router すべてのルーティングコンポーネントは、次の場所にレンダリングされます。

  

react-router

• react-routerグローバルコンポーネントのアプローチ
• react-routerはJSX構文でオブジェクトフォームとコンポーネントフォームの両方の設定をサポートしています。
• react-routerの子コンポーネントは子コンポーネントとして親コンポーネントに渡され、ルートコンポーネントは次の位置にレンダリングされます。

  

Vue VS React

• Vueを使ってプロジェクトを開発するとき、一番感じるのは利便性です。例えば、ディレクティブv-modeとモディファイア.syncによって双方向バインディングを簡単に実装できます。v-forとv-ifによるDOMの条件付きレンダリング。コードスニペットを再利用するためのmixin mixinなど。同時に、Vueの作者はしばしば開発者に「ちょっとした注意」を与えています。