VueとReactの詳細

1. パノラマ

II. 背景

1. 反応: プロフェッショナル

Reactは2011年に誕生しました（FaxJS）。
2013年7月3日 v0.3.0
2016年3月30日 v0.14.8
2016年4月9日 v15.0.0
2017年9月27日 v16.0.0、ファイバーが正式にリリースされました
2019 年には、フック構文を正式にサポートする react 16.8 がリリースされました。
2020年10月22日 v17

問題の解決方法:

We build React to solve one problem:building large applications with data that changes over time. React 、時間の経過とともに変化するデータを扱う大規模なアプリケーションを構築するという 1 つの問題を解決するために構築されました。

2. ビュー: 凡例

2013 年に個人プロジェクトとして始まりましたが、現在では世界 3 大フロントエンドフレームワークの 1 つとなり、中国本土ではフロントエンドの第一選択肢となっています。 (面接官の質問: なぜ Vue の使い方を学んだのですか? 回答: 愛国心だからです!)

2013年、 Googleで働いていたYuxi You氏はAngularにインスピレーションを受け、そこから気に入った部分を抽出して、当初Seedと名付けられた軽量フレームワークを開発しました。
同年 12 月にその芽が出て、 Vue (ビューレイヤーライブラリであり、vue はview意味するフランス語であるため) に名前が変更され、バージョン番号は 0.6.0 になりました。
2014 年 1 月 24 日に、Vue はバージョン番号 0.8.0 で正式に一般公開されました。
2014 年 2 月 25 日にリリースされた 0.9.0 には、独自のコード名「 Animatrix 」があります。この名前は、「マトリックス」のアニメ版に由来しています。それ以降、重要なバージョンには独自のコード名が付けられます。
0.12.0は2015年6月13日にリリースされ、コードネームはDragon Ballです。この年、Vueは大きな爆発的な人気を獲得しました。Laravel Laravel （人気のPHPフレームワークコミュニティ）が初めてVueを使用し、JSコミュニティでもVue人気が高まりました。
1.0.0 Evangelion 、 Vueの歴史における最初のマイルストーンです。同年には、 vue-router (2015-08-18)、vuex (2015-11-28)、 vue-cli (2015-12-27) が次々とリリースされ、 Vueビューレイヤーライブラリからプログレッシブフレームワークへと進化しました。多くのフロントエンドの学生もこのバージョンから Vue ユーザーになりました (vue1 は完全にレスポンシブです)。
2016 年 10 月 1 日 2.0.0 Ghost in the Shell React番目の重要なマイルストーンでした。React のVirtual Domソリューションを取り入れ、サーバー側レンダリングもサポートしました。
2019年2月4日、2.6のリリース前の長い間、 Vueコアチームはvue-cli3.0の開発に忙しく、多くの要件を蓄積し、 vue2の最後から2番目のバージョン（2020年にリリース）をリリースしました。
2020年9月18日vue3は、誰でもすぐに習得でき、簡単にアプローチできるフレームワークになることを使命として登場しました。同年、新時代のパッケージングツールであるViteもリリースされました（将来的にはwebpackに取って代わる可能性があります）

Vue のマスベース図は次のとおりです。

3. 技術的な思考

react全体として関数型の概念です。コンポーネントはall in js記述された jsx 構文を使用し、 htmlと css をjavaScriptに統合します。jsx 構文は比較的柔軟性があります。

Vue の全体的な考え方は、依然として古典的なhtml (構造) + CSS (パフォーマンス) + JS (動作) 形式を採用することです。Vue は開発者にtemplate使用を推奨し、開発者が使用するv-if 、 v-show 、 v-for などの指示を提供します。したがって、Vue アプリケーションを開発するときは、古典的な Web アプリケーション (構造、パフォーマンス、動作の分離) を作成する感覚になります。

データ管理 ( props 、 data vs state )、コンポーネントの記述、ライフサイクルにおける一般的な相違点と類似点については、ここでは比較しません。

1. キーの類似点と相違点を例に挙げる

1. リストにキーを追加する際のreactと vue の最終的な目標は同じです。oldVnode 内の対応するoldVnodeノードをより正確かつ迅速に取得して、パフォーマンスを向上させることです。ただし、実装するアルゴリズムには一定の違いがあります。

1.1 反応する

React が配列をレンダリングするときに、子コンポーネントがキーを提供しない場合は、デフォルトでループインデックスが最初のレンダリングのキーとして使用されます。ソースコードは本質的にはブルートフォース比較方式です。単一リンクリストファイバーはダブルポインターアルゴリズムを使用できないため、アルゴリズムではダブルポインター最適化を使用できません。一般的に、トラバーサルは 2 ラウンド行われます。トラバーサルの最初のラウンド: 更新されたノードの処理。 2 回目の走査: 更新に含まれない残りのノードを処理します。

アルゴリズムの複雑さを軽減するために、React の diff には事前に設定された制限があります。

同じレベルの要素のみを差分します。 DOM ノードが 2 つの更新間で階層を越える場合、React はそれを再利用しようとしません。
異なるタイプの 2 つの要素によって、異なるツリーが生成されます。要素が div から p に変更されると、 React div とその子孫ノードを破棄し、新しい p とその子孫ノードを作成します。
まずキーを決定し、次にタイプを決定します。 2 つが同じであれば、それらは同じノードです。更新 > 追加/削除

1.2 ビュー

diff パフォーマンスの面では、 vue react よりも強力です。ソースコードと本を注意深く読んだ後、非常に感心しました。アルゴリズムの問題、つまり最長増加部分列を例に挙げてみましょう。配列 [2, 11, 6, 8, 1] を例にとると、最終出力結果は [0, 2, 3] であり、最も強い増加列のインデックスがそれぞれ 0、2、3 であり、対応する値が 2、6、8 であることを示しています。つまり、この配列内で最も長く連続的に増加する値は、配列内の 3 つの要素 2、6、8 です。

それで、vue3 はこの方法の使用に多大な労力を費やしましたが、その目的は何でしょうか? DOM-Diffプロセス中、Vue2 は、直接比較、直接比較、間接比較などの特別なシナリオの処理を優先します。

DOM-Diff処理中に、 Vue3 はnewIndexToOldIndexMapの新旧ノードインデックスリストに基づいて最長の安定したシーケンスを見つけ、最長増加サブシーケンスアルゴリズムを比較して、新旧ノードで移動する必要のないノードを見つけ、その場で再利用し、移動する必要があるノードまたはpatchたノード (ノードの追加や削除など) のみを操作して、置換効率を最大化します。 Vue2 バージョンと比較すると、質的な改善です。

2. diffのマクロ比較

2.1 反応する

React では、コンポーネントの状態が変化すると、React はこのコンポーネントとそのすべての子孫コンポーネントを再レンダリングします。ただし、再レンダリングは、以前のレンダリング結果がすべて破棄されることを意味するわけではありません。React react 、引き続きdiffを通じて 2 つの仮想 DOM を比較し、最終的に実際の DOM にpatch 。それでも、コンポーネントツリーが大きすぎる場合は、 diff にはまだオーバーヘッドが発生します。 react内部的にはfiberを通じて diff アルゴリズムを最適化し、外部的には開発者にshouldComponentUpdate pureComponent使用して問題を回避することを推奨しています。

2.2 ビュー

vue2 のレスポンシブ性は Object.defineProperty によって実現されており、getter や setter などの一連の操作を書き換えてオブザーバーモードを実装しています。データが変更されると、React のようにコンポーネントツリー全体を比較するのではなく、データの状態が変わったコンポーネントインスタンスを更新します。

3. ライフサイクル

3.1 反応ライフサイクル

古い 15.x-16

新着 16歳以上

その他:componentDidCatch

Reactライフサイクルの命名は常に非常に意味的でした (ささやき声: 本当に長くて覚えにくいです)

3.2 Vueのライフサイクル

4. 関数型プログラミング

双方とも大規模な変更を行いました。ソースコードは異なりますが、設計思想やコードのシンプルさの面で進歩がありました。

4.1 反応フック

元の面倒なcompomentDidUpdateライフサイクル => useEffect 、まったく同じではありませんが、ほとんどのシナリオでは、開発者の観点からは、 propsまたは状態のデータが変更された後にどのような結果 (副作用) が発生するかをより気にするため、開発者が前後の値を比較するプロセスが不要になります。 (これは、 vue watchから借用した react であるはずです)

4.2 Vue3 組み合わせ API

vue3統合 API は、 react hooksからいくつかのアイデアを借用しています。オリジナルよりも優れていると言わざるを得ません。さらに、フレームワーク自体も多くの最適化作業を行っているため、パフォーマンスの点で React に匹敵することはできません。

関数（） {
    使用効果(()=>{
        // デモが変更されたときに console.log(demo) をトリガーします
    }、[デモ]）
    
    戻る （
        <div>反応する</div>
    ）
}

'vue' から {reactive, watchEffect} をインポートします。
エクスポートデフォルト{
    設定（） { 
          const 状態 = リアクティブ({ カウント: 0、名前: 'zs' })
          ウォッチエフェクト(() => {
            コンソールログ(状態数)
            console.log(状態名)
          })
          戻る {
            州
          }
    }
}

初期化中のソースコード内の応答メカニズムにより、新しいAPIwatchEffect 、副作用をトリガーするために誰が変更したかを監視する必要さえありません。これは、監視プロセス全体がvue3ソースコード内のProxyによって完了するためです。

それだけでなく、 vue3ではネイティブ js に近い構文も導入されました。素晴らしいですね! ！！！！！

<スクリプトの設定>
"vue" から {reactive, ref} をインポートします。

// プログレッシブ更新: ref api
val = ref(""); とします。
todos = リアクティブ([
  {
    id: 0,
    タイトル: 「食べる」
    完了: false、
  },
  {
    id: 1,
    タイトル: 「眠る」
    完了: false、
  },
]);

関数addTodo() {
  todos.push({
    id: todos.length,
    タイトル: val.value,
    完了: false、
  });
  val.値 = "";
}
</スクリプト>

実際、この時点で、 vueテクノロジースタックに精通している学生は、密かに誇らしく「 vue yes !」と言うはずです。残念ながら、このような優れたライブラリにも独自の問題があります。vue2 Object.definePropertyでは、オブジェクトの配列インデックスや新しく追加されたプロパティ値の変更を監視できないのは当たり前のことです。vue3 ではProxy Apiを使用してこれらの問題を解決していますが、新しい問題ももたらしています。たとえば、 reactiveオブジェクトしか渡すことができません ( react useState単純および複雑な値を渡すことができます)。一方、公式に推奨されている ref では、.value を通じて値を取得する必要があります。これは本当にコミュニティを爆発させます。このため、vue チームはプレッシャーの下でtoRefsをリリースせざるを得ませんでした (興味のある学生はそれについて学ぶことができます。以前、オフラインで Yibao と議論したことがあります)。

5. イベント処理 (@Click と onClick)

5.1 ビュー

vue v-on (略称:) 命令を使用して DOM イベントをリッスンし、トリガーされたときにJavaScriptコードを実行します。 v-on は通常、呼び出す必要があるメソッド名を受け取るために使用されます。

<div @click="helloShanghai">ようこそ</div>
<div @click="helloShanghai('hello')">ようこそ</div>

ネイティブDOMイベントにアクセスするには、 methodに$event明示的に渡すことができます。

<div @click="helloShanghai('hello', $event)">ようこそ</div>

通常の要素addEventListener 、コンポーネント $on

5.2 反応する

React要素のイベント処理は DOM 要素のイベント処理と非常に似ていますが、構文には若干の違いがあります。

Reactイベントは、純粋な小文字ではなく、キャメルケースを使用して名前が付けられます。
JSX 構文を使用する場合は、文字列ではなく関数をイベントハンドラーとして渡す必要があります。

<div onClick={this.handleClick}>クリックしてください</div>
<div onClick={this.handleClick.bind(this)}>クリックしてください</div>
<div onClick={()=>{this.handleClick()}）}>クリックしてください</div>
<div onClick={this.handleClick()}>クリックしてください</div><!-- 間違った書き方です>

React16 はdocumentに合成イベントをマウントし、バージョン 17 以降ではroot要素になります。

6. コンポーネント化

Vue 、通常のHTMLに似たテンプレートの作成が推奨されています。標準の HTML 要素に非常に近い形で記述されていますが、いくつかの属性が追加されています。 React では、すべてのテンプレートを一般的なJavaScript構文拡張である JSX で記述することを推奨しています。

7. ビルドツール

React ==> React APP の作成 Vue ==> vue-cli

8. その他

もちろん、Vue の slots や React のprops.childrenなど、他の比較もあります。ライフサイクル: getDerivedStateFormProps 、 getSnapshotBeforeUpdate

私の意見:

1. React は、複雑なビジネスロジックやコンポーネントの再利用の問題を処理する点で Vue よりも優れているため、ミッドエンドおよびバックエンドプロジェクトで認められていますが、チーム全体の技術力を強化し、リーダーの設計および品質管理能力を向上させる必要があるため、開発コストが高くなります。 2. vue 、よりフレンドリーで使いやすい記述スタイルで知られています。よりフレンドリーな API とよりユーザーフレンドリーなデザインにより、開発コストと効率が大幅に向上します。 3. 一方、Vue には開発者を標準化する API が多数ありますが、開発者の多様な思考もある程度制限されます。一方、 reactには開発者の創造性を向上させる API が少なく、 react開発者ごとにreactに対する理解が異なり、異なるコードスタイルを生成するためでもあります。 4. Vue と React は、長い開発の過程で成熟してきました。慎重に検討した結果、モバイル側でも大規模なミドルエンドやバックエンドでも、どちらも非常に実現可能であると感じています。フレームワークの良し悪しについては、実際には、会社のチームがどのようなテクノロジースタックを使用したいのか、どのようなテクノロジースタックが好きで得意なのかなどについて、もっと考える必要があります。

5. ファミリーバケツ

これで、 vueとreactに関する詳細な記事は終了です。 vue とreactより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: