一緒に創造し、成長するために一緒に働きましょう！「ナゲッツデイリー新プラン・8月アップデートチャレンジ」参加18日目、イベント詳細はこちら
フロントエンド フレームワークは 10 年以上の競争を経験しており、JSP、jQuery、Ember、Angular、React、Vue、Solid、Svelte などを経験しています。今日誰もが認めなければならない事実は、何百ものフロントエンド フレームワークの中で、最も影響力のある Vue と React の 2 つだけが残っているということです。
Vue が 3.x の時代に入ってから約 2 年が経ち、React も今年 3 月 29 日に React 18 バージョンをリリースしました。
今日は、今日の 2022 年の 2 つの違いについて話しましょう。
どちらが優れているかを根本から比較してみましょう。
インストールして起動
両方のフレームの取り付けから始めます。
見た
Vue には、Vue プロジェクトを作成するための Vue CLI が用意されています。インストール コマンドは次のとおりです。
npm install -g @vue/cli
复制代码インストールが成功したら、バージョンをチェックして、インストールが成功したことを確認できます。
vue --version
复制代码新しいプロジェクトを作成するには、次のコマンドを実行します。
vue create project
cd project
npm run serve
复制代码反応する
React プロジェクトを作成するためのツールは、create-react-app、または略して CRA です。
npm install -g create-react-app
复制代码新しいプロジェクトを作成するには、次のコマンドを実行します。
npx create-react-app project
cd project
npm run start
复制代码結論は
この 2 つは、インストール プロジェクトとスタートアップ プロジェクトの点でほぼ同じであり、結びついています。
小道具
どちらのフレームワークもコンポーネントをベースに開発されているため、親コンポーネントと子コンポーネント間の値の受け渡しが問題になります。props は、親コンポーネントから子コンポーネントにデータを渡すための重要なテクニックです。
見た
Vue では、小道具は通常の文字列として渡されます。変数は、コロン (:) で省略された v-bind ディレクティブを介して渡すこともできます。
親コンポーネントのパス値:
<template>
<Modal :isOpen="open" title="创建项目" />
</template>
复制代码props へのサブコンポーネント アクセスには、defineProps 関数を使用する必要があります。
<template>
<form v-if="isOpen">
<p>{
{ title }} </p>
</form>
</template>
<script setup>
const props = defineProps({
isOpen: Boolean,
title: String
});
</script>
复制代码反応する
React では、props は中括弧を介して変数として渡されます。
親コンポーネントのパス値:
<Modal isOpen={open} title="创建项目" />
复制代码サブコンポーネントは、パラメーターを介して小道具を取得します。
function Modal({ isOpen, title }) {
return (
{isOpen &&
<form>
<p>{ title }</p>
</form>
);
}
复制代码結論は
小道具を渡すとき、Vue はプロパティの前に追加のディレクティブを追加する必要があります。ディレクティブを追加するのを忘れると文字列が渡されることになります。React はそれをしません。
子コンポーネントが値を受け取るとき、Vue は defineProps 関数を呼び出す必要があり、React は関数のパラメーターを介して値を取得します。これはより自然です。
総合的に比較すると、Vueの方が精神的負担が大きく、Reactの方が自然です。React がこのラウンドに勝利します。
イベント
Vue はテンプレート構文を使用し、React は JSX 構文を使用します。そのため、HTML の書き方に変更がありました。ただし、マウス イベント、キーボード イベントなどを要素に追加する必要があります。イベント処理も必須です。
見た
Vue は v-on 命令を通じてイベントを処理します。省略形は AT 記号 (@) です。
<template>
<button @click="displayName"> Show Name </button>
<template>
<script setup>
function displayName() {
// TODO
}
</script>
复制代码反応する
React がイベントを作成する方法は、ネイティブ HTML とほぼ同じですが、バインドされたイベントの属性名がキャメルケースである必要があるという違いがあります。
function NameAlert() {
const displayName = () => {
// TODO
}
return (
<button onClick="displayName"> Show Name </button>
);
}
复制代码結論は
React の方が自然です。Vue にはまだ追加の演算子が必要です。演算子を追加するのを忘れると、文字列を渡す props になります。React にはこの問題はありません。React がこのラウンドに勝利します。
州
どちらもデータ駆動型のリアクティブ フレームワークであるため、状態の管理が重要な問題になります。
見た
Vue では、状態は ref またはリアクティブによって作成されます。
2 つの使用法は少し異なります。ref は基になる型の状態を処理するために使用され、reactive は通常、参照型の状態を処理します。
ref 状態を使用する場合、ref.value を介して状態にアクセスする必要があります。
<template>
<div>
<p>{
{ firstname }}</p>
<p>{
{ lastname }}</p>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const firstname = ref('张');
console.log(firstname.value);
const lastname = reactive('三');
console.log(lastname);
</script>
复制代码状態の変化を監視するメソッドは、watch と watchEffect です。
2 つの違いは、watchEffect が最初に 1 回実行されることです。
import { watch, watchEffect } from 'vue';
watch(firstname, () => alert('firstname 改变了！');
watchEffect(lastname, () => alert('lastname 改变了！');
复制代码反応する
React は useState を使用して状態を作成します。
import { useState } from 'react';
function ShowName() {
const [firstName, setFirstName] = useState('张');
const [lastName, setLastName] = useState('三');
console.log(firstName, lastName);
return (
<div>
<p>{ firstname }</p>
<p>{ lastname }</p>
</div>
)
}
复制代码React は useEffect フックを使用して状態の変化をリッスンします。このフックは、コールバック関数と依存関係の配列を受け入れます。依存配列の状態が変化すると、コールバック関数がトリガーされます。
import { useEffect } from 'React';
useEffect(() => {
console.log('名字改变了!');
}, [firstName, lastName]);
复制代码結論は
Vueは状態を作る方法と状態を監視する方法をそれぞれ提供しています.どのAPIをどのような場合に使うかを考える必要があります.Reactは1つの方法しか提供していませんが,様々な状況に対応できます. 総合的に比較すると、Vueの方が精神的負担が大きく、Reactの方がシンプルです。React がこのラウンドに勝利します。
参照
どちらのフレームワークもプログラミングにコンポーネントを使用しますが、アニメーションの追加、入力ボックスのフォーカスの制御など、必然的に DOM にアクセスする必要があります。この種の問題を解決するために、どちらのフレームワークも、DOM への参照を作成するために使用できる ref の概念を提供します。
見た
Vue は ref API を提供します。
<template>
<div>
<input type="text" ref="name" />
<button @click="handleBtnClick"> 开始输入 </button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const name = ref(null);
handleBtnClick(() => {
name.value.focus();
}
</script>
复制代码反応する
React は useRef フックを提供します。ただし、DOM にアクセスするには、ref.current プロパティを使用する必要があります。
import { useRef } from 'react';
function MyName() {
const name = useRef(null);
handleBtnClick(() => {
name.current.focus();
});
return (
<input type="text" ref="name" />
<button onClick={handleBtnClick}> 开始输入 </button>
)
}
复制代码結論は
ほとんど違いはありません。
双方向データバインディング
input、select、textarea などの要素を使用する場合、入力値は状態と同期する必要があります。状態が変化すると、要素の値も同期する必要があります。この機能は、データ双方向バインディングと呼ばれます。
見た
Vue は、双方向バインディングを作成する v-model ディレクティブを提供します。
<template>
<input v-model="searchQuery" />
</template>
<script setup>
import { ref } from 'vue';
const searchQuery = ref('');
</script>
复制代码反応する
React はこの機能のための個別の API を提供していませんが、可能です。
import { useState } from 'react';
function MyComponent() {
[searchQuery, setSearchQuery] = useState('');
const handleChange = (event) => {
setSearchQuery(event.target.value);
}
return (
<input value={searchQuery} onChange={handleChange}/>
);
}
复制代码結論は
構文的には、Vue の方が簡潔です。しかし、データを変更する方法が 1 つしかないわけではないため、これは一方向のデータ フローの原則を破ります。React のコードは簡潔ではありませんが、状態を追跡しやすくなっています。これは、React と Vue の設計思想の違いでもあります。「開発者がより少ないコードを記述できるようにする」と「コード構造をより明確で維持しやすくする」の間で、Vue は前者を選択し、React は後者を選択します。誰が善人で誰が悪人かというと、人は後者に偏りますが、人によっては前者に偏ります。トレードオフの問題なので、Ping.
動的レンダリング
コンポーネントが特定の条件に従ってレンダリングされることがありますが、これは動的レンダリングです。
見た
Vue には、v-if、v-else、v-show の 3 つのディレクティブがあります。
<template>
<div>
<p v-if="isLoggedIn"> 欢迎 </p>
<p v-else> 请登录 </p>
<button v-show="!isLoggedIn">登陆</button>
</div>
</template>
复制代码反応する
React はこの機能のための API を提供しませんが、if、&&、または三項演算子などのネイティブ JavaScript 条件ステートメントを使用します。
function MyComponent() {
return (
{isLoggedIn ?
<p>欢迎</p> :
<p> 请登录 </p>
}
{!isLoggedIn && <button> 登陆 </button>}
);
}
复制代码結論は
Vue の構文は要素に特別なプロパティを追加するものですが、React の構文は純粋な JavaScript 構文です。構文的には、大きな違いはありません。ただし、Vue には追加の学習コストがかかります。全体として、今回の React のほうがわずかに優れています。
子コンポーネントをレンダリングする
一緒にレンダリングするために、子コンポーネントを他のコンポーネントに渡す必要がある場合があります。
見た
Vue は、子コンポーネントを渡すためのスロットを提供します。
コンテナ コンポーネント:
<template>
<div>
<h1>Welcome</h1>
<slot><slot>
</div>
</template>
复制代码親コンポーネント:
<template>
<div>
<h1>欢迎来到我的网站</h1>
<Modal>
<input type="text" />
<button>登陆</button>
</Modal>
</div>
</template>
复制代码反応する
React の子コンポーネントは props: children のプロパティです。
コンテナ コンポーネント:
function Modal( {children} ) {
return (
<div>
<h1>Welcome</h1>
{ children }
</div>
);
}
复制代码親コンポーネント:
function UserPage() {
return (
<div>
<h1>欢迎来到我的网站</h1>
<Modal>
<input type="text" />
<button>登陆</button>
</Modal>
</div>
);
}
复制代码結論は
上記の例から、両者の間に大きな違いはありません。ただし、N 個の子コンポーネントを渡すなど、より複雑なケースでは。React はプロパティを介して渡すことができ、操作コンポーネントは操作変数と同じですが、Vue には名前付きスロット、動的な名前のスロット、スコープ付きスロットなどの概念があり、操作が面倒で精神的な負担が大きくなります。React がこのラウンドに勝利します。
要約する
この記事を通じて、2 つのフレームワークの概念と構文のほとんどを比較しましたが、それぞれに独自の利点があり、どちらが優れているとは言えません。
早くも2016年頃、初めて両者を比較したとき、その差はかなり大きいと感じた. 当時はReactはまだクラスコンポーネントの時代であり、状態を更新するにはthis.setStateが必要であり、コンポーネントはまた、複雑なライフサイクルがたくさんありました。Vue はまだ Options API の時代にあり、非常に使いやすいとは言えません。たとえば、データが関数を渡してオブジェクトを返さなければならない、コンポーネントを使用して定義する、イベントを使用して定義する、すべてを定義する必要がある、という問題があります。 ...
今日の React と Vue が同じ方向に進んでいるように見えます。
相互学習の要素はありますが、数年前から Vue が React をコピーしたという懐疑的な声がありました。特に Vue3 が Composition API を開始した後は、ますます React に似てきました。Vue3 One Piece のコードネームは、React から多くのものを盗むことのメタファーだとさえ言う人もいます。
あなたが思うこと？
すべての人に実用的な面接の質問バンクを要約して推奨する
1. フロントエンド面接質問集（面接必須）おすすめ：★★★★★
2. おすすめフロントエンド技術ナビ : ★★★★★
アドレス:フロントエンド テクノロジー ナビゲーション Daquan