Reactを4年間使用した後、Vueに切り替えるのはどのような経験ですか？

全文は1,825語で、予想学習時間は5分です。

 

出典：unsplash

過去4年間、私はReactフレームワークを使用してきましたが、最近Vueを使い始めました。2つのVueの間にはいくつかの概念的な違いがありますが、Angularの影響を受けますが、Reactフレームワークの下で行われる作業はVueにも適用されます。

 

VueはAngularとReactの最高の部分を統合していると思います。主な理由の1つは、Vueフレームワークの作成者であるYou Yuxiが、Reactを使用してインスピレーションを得て、新しいフレームワークを開発したことです。

 

「他の概念を考慮せずにReactのお気に入りの部分だけを抽出して、軽量のフレームワークを構築するとどうなると思いますか？同時に、Reactの内部実装がどのように機能するかについても興味があります。そこで私は試み始めました宣言型データバインディングなど、この最小限の機能セットを複製します。それが私がVueの構築を開始した方法です。」-You Yuxi

 

この記事では、2つのフレームワークの違いに焦点を当てます。まず、いくつかの事実を見てみましょう。

 

クイック比較

 

・Reactはライブラリであり、Vueは完全なフレームワークです

・高速で実行でき、すべて軽量のフロントエンドフレームワークです

・すべてにコンポーネントシステムアーキテクチャがあります

・どちらも仮想DOMを使用します

・どちらもHTMLファイルに入れることも、より複雑なWebpack構成モジュールにすることもできます。

・すべてに独立しているがユニバーサルなルーターと状態管理ライブラリがあります

 

最大の違いは、Vueは通常HTMLテンプレートファイルを使用するのに対し、ReactはJavaScriptライブラリを完全に使用することです。Vueには、可変状態と、反応性と呼ばれる再レンダリング用の自動システムもあります。

 

コンポーネントシステムアーキテクチャ

 

ReactとVueはどちらも、再利用可能なコンポーネントに基づくアプローチに従います。

 

・ReactコンポーネントとVueコンポーネントを比較します

 

ReactとVueはどちらもコンポーネントメソッドを提供しますが、それらは完全に異なります。これは、Reactがコンポーネントをクラスとして定義しているのに対し、Vueはコンポーネントをオブジェクトとして定義しているためです。Vue.componentはコンポーネントをグローバルに登録し、React.Componentはコンポーネントの基本クラスとして機能します。

<ComponentName />は、テンプレートで直接使用されるクラス名です

Vueのコンポーネントは通常のオブジェクトであり、Vueを拡張する必要はありません。

Vueの同じコンポーネントとパターン：<ComponentName />は単なるオブジェクトであり、表示するにはVueアプリケーションのコンポーネント値に含める必要があります。

コンポーネントベースのアプローチがあるにもかかわらず、この2つはまったく異なります。

 

・ReactJSXとVueテンプレートを比較する

 

ReactのrenderPropメソッドはJavaScriptと同じであるため、テンプレートで行うことはすべてJavaScriptと同じです。VueはHTMLテンプレートに依存しているため、いくつかの手順が含まれています。これらの手順は、設計がAngularJSと非常に似ています（実際にはほとんど同じです：v-if、v-for、v-showなど）。

 

ライフサイクルアプローチ

 

Vueのコンポーネントには、Reactメソッドと同様のライフサイクルメソッドがあります。それらを1つずつペアリングしてみてください。

 

・コンストラクター→作成

・componentWillMount→beforeMount

・componentDidMount→マウント済み

・componentWillUnmount→beforeDestroy

・componentDidCatch→N / A

・shouldComponentUpdate→N / A

・SetState→N / A —属性を直接設定します

 

コンポーネントのステータスとデータ

 

Reactには、コンポーネントの状態があります。Vueにはデータがあります。

 

初期状態を設定する

コンポーネントを反応させる

Vueコンポーネント

最新状況

ReactはsetStateメソッドを使用します

Vueは新しい値をプロパティに割り当てるだけです

条件付きレンダリング

Reactは通常、特定の条件下でコンテンツをレンダリングするために三項演算を使用します

Vueはv-if命令を導入しましたが、これは同じ効果があります。

ループで繰り返しレンダリングします

Reactでは、通常、値をマップして、各要素の目的の値を含む文字列を返します。

Vueでは、v-forディレクティブが使用されます

生態系

 

VueにはReactよりも多くの「公式」ライブラリがあります。つまり、コアフレームワークとともに公式にサポート、維持、リリースされています。十分に成熟していないため、VueにはReactほど多くのコミュニティサポートライブラリがありません。

 

チャート

 

つまり、VueとReactはどちらも、複雑なネットワークソリューションを作成するための強力なツールです。彼らはあなたが手軽にどんな仕事も完了するのに十分です。どちらかが正しい選択です。

AIの学習と開発の乾物を一緒に共有する

フルプラットフォームのAI垂直セルフメディア「コアリーディング」をフォローすることを歓迎します

（エディターWeChat：dxsxbbを追加し、リーダーサークルに参加して、最新の人工知能技術について一緒に話し合ってください〜）