ホームページ >ウェブフロントエンド >フロントエンドQ&A >ReactJSとVUEJSの違いは何ですか
ReactJSとVUEJSの違いは何ですか
- 青灯夜游オリジナル
- 2021-09-01 11:37:363502ブラウズ
reactjs と vuejs の違い: 1. Vue はデータの双方向バインディングですが、react は双方向バインディングではありません; 2. 親と子以外のコンポーネントは通信を実装し、react はデータの双方向バインディングを可能にします。共通の親コンポーネントはイベント関数をトリガーして仮パラメータを渡しますが、vue はサブスクリプション/パブリッシュ モードを使用します; 3. React は状態管理に Redux を使用し、Vue は vuex を使用します。
1. データ バインディング
1.1 Vue でのデータ バインディングに関する部分
- Vue は双方向バインディングであり、Vue.js のコア機能は 2 つあり、1 つはレスポンシブ データ バインディング システム、もう 1 つはコンポーネント システムです。いわゆる双方向バインディングとは、Vue インスタンス内のデータと、それがレンダリングする DOM 要素の内容が一致することを意味し、誰が変更されても、相手もそれに応じて同じデータに更新されます。これは、プロパティ アクセサーを設定することによって実現されます。
- vue では、データ バインディングは
- 補間式、コマンド システム、*クラスとスタイル、イベント ハンドラーとフォーム スペース、Ajax リクエストと計算されたプロパティに関連します
1.1.1 補間式
補間およびディレクティブはテンプレート構文とも呼ばれます - データ バインディングの最も一般的な形式は、「Mustache」構文を使用することです (double のテキスト補間)中括弧)
- Mustache 構文は HTML 機能では使用できません。この場合、v-bind ディレクティブを使用する必要があります
1.1.2 ディレクティブ
- #vue のディレクティブは非常に便利で、ディレクティブは v- という接頭辞が付いた特殊な属性です。ディレクティブ属性の値は、単一の JavaScript 式であることが想定されます (v-for は例外であり、これについては後で説明します)。このディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。
- vue の 12 個の命令:
v-bind、v-once、v-model、v-text、v-html、v-on、v-if、v- else、v-show、v-for、v-pre、v- Clock
データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することです。これらはすべてプロパティであるため、v-bind を使用してそれらを処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスおよびスタイルとともに使用される場合に特に v-bind を強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。
- オブジェクト構文
-
オブジェクトを v-bind:class に渡してクラスを動的に切り替えることができます -
配列を v-bind:class に渡してクラス リストを適用できます。- ##
<div v-bind:class="[activeClass, errorClass]"></div>
1.1.4 条件付きレンダリングとリスト レンダリング - ##
v-if 一連の数値の条件付きレンダリング
- v-for 命令を使用して、配列内のオプションのリストに基づいてレンダリングします。 v-for ディレクティブには、items 内のフォーム item の特別な構文が必要です。ここで、items はソース データ配列であり、item は配列要素を反復処理するためのエイリアスです。
- 1.1.5 イベント ハンドラー
v-on を介して要素にイベントを登録する
- v を使用するにはいくつかの方法があります。 -on 1 つの利点:
- HTML テンプレートをスキャンすることで、JavaScript コード内の対応するメソッドを簡単に見つけることができます。
- JavaScript でイベントを手動でバインドする必要がないため、ViewModel コードは非常に純粋なロジックとなり、DOM から完全に切り離され、テストが容易になります。
- ViewModel が破棄されると、すべてのイベント ハンドラーが自動的に削除されます。自分で掃除することを心配する必要はありません。
v-model はフォーム コントロール要素に双方向のデータ バインディングを作成します
コントロールの種類に基づいて要素を更新するための正しい方法が自動的に選択されます。- 1.1.7 計算プロパティ
計算プロパティは、テンプレートにロジックを入れすぎると発生する問題に対処するために Vue に導入されました。テンプレート パスは重く、メンテナンスが困難です。これにより、上記の問題が解決されるだけでなく、テンプレートとビジネス ロジックをより適切に分離することができます。
簡単に言えば、データに属性 a=1 があり、a で変更する変数が必要な場合 (たとえば、b=a 1)、計算された属性を使用する必要があります。 Vue インスタンスの計算された属性、セット b はその属性であり、関数として動作し、戻り値は b の値です。- #1.1.8 ajax データ リクエスト
vue2.0 # でのデータ リクエストには axios を使用することをお勧めします##注意:
vue の双方向データ バインディングと一方向データ フローについてVue の依存関係追跡は [原則として双方向バインディングです。はサポートされていません。v-model これは DOM イベントをリッスンすることによって実装された単なる糖衣構文です]
Vue の依存関係追跡は、Object.defineProperty を通じてデータ オブジェクトのすべてのプロパティをゲッター/セッターに変換することによって実装されます。データのプロパティ値が変更されると、set 関数がトリガーされて取得されます。属性値が変更されると get 関数がトリガーされます。この機能により、データが変更されたときにビューを変更できます。つまり、ビューの変更はデータが変更された場合にのみトリガーされます。ビューが操作されている場合、データは DOM イベントを通じてのみ変更できます。その後、ビューを変更して双方向バインディングを実現します。
1.2 反応には双方向のデータ バインディングがありません
- react は一方向のデータフローです
- React は、状態 (モデル層) とビュー層を双方向にバインドすることで、データのリアルタイム更新と変更を実現します具体的には、ビュー レイヤーに JS コードを直接記述すると、モデル レイヤーのデータを取得してレンダリングします。フォーム操作、トリガー イベント、Ajax リクエスト などによってデータ変更がトリガーされ、次にデュアル同期が実行されます
#1.2.1 イベント処理
- React 要素のイベント処理は、DOM 要素のイベント処理と非常によく似ています。ただし、文法的には少し異なります。
- React イベント バインディング プロパティの名前は、小文字ではなくキャメル ケースで付けられます。
- JSX 構文を使用する場合は、文字列 (DOM 要素の記述方法) ではなく、関数をイベント ハンドラーとして渡す必要があります。
- React のもう 1 つの違いは、デフォルトの動作を防ぐには、return false を使用します。 PreventDefault を明示的に使用する必要があります。
- ES6 クラス構文を使用してコンポーネントを定義すると、イベント ハンドラーがクラスのメソッドになります。通常、これを明示的にバインドする必要があります。たとえば、
this.handleClick = this.handleClick.bind(this);
JSX コールバックを次のように扱う必要があります。注意 関数およびクラスメソッドの this は、デフォルトではこれにバインドされません。 this.handleClick をバインドして onClick に渡すのを忘れた場合、この関数を呼び出したときに this の値は未定義になります。
1.2.2 条件付きレンダリング
- React の条件付きレンダリングは JavaScript と同じで、次の場合に JavaScript 演算子を使用します。または条件演算子を使用して、現在の状態を表す要素を作成し、それに基づいて React に UI を更新させます。
- コードを中かっこで囲むことで、JSX に任意の式を埋め込むことができます。これには、条件付きで要素を便利に表示できる JavaScript ロジックや && も含まれます。これが機能するのは、JavaScript では true && 式は常に式を返し、偽の && 式は常に false を返すためです。したがって、条件が true の場合、&& の右側の要素がレンダリングされ、false の場合、React はそれを無視してスキップします。
- 条件付きレンダリングの別の方法は、JavaScript の条件演算子condition ? true : false を使用することです。
1.2.3 リストのレンダリング
- JavaScript で {} を使用するか、map() を使用して、JSX 内で要素のコレクションを構築できます。メソッドは配列をループします
- キーは、DOM 内の特定の要素が追加または削除されたときに React がどの要素が変更されたかを識別するのに役立ちます。したがって、配列内の各要素に特定の ID を与える必要があります。要素のキーは、リスト内のこの要素が所有する一意の文字列であることが好ましい。通常、データの ID を要素のキーとして使用します。
1.2.4 フォーム操作
- HTML フォーム要素は、React の他の DOM 要素とは異なります。これは、フォーム要素が本質的に予約された内部状態であるためです。
- ユーザーがフォームを送信すると、HTML のデフォルトの動作により、フォームは新しいページにジャンプします。 Reactでも同じことが言えます。ただし、ほとんどの場合、フォームの送信を処理し、ユーザーが入力したフォーム データにアクセスする関数を構築します。これを実現する標準的な方法は、「制御コンポーネント」と呼ばれる技術を使用することです。 Reactによって値が制御される入力フォーム要素を「制御コンポーネント」と呼びます。
- this.setState({value:event.target.value});
1.2.5 ステータスの改善
- React では、状態共有は、データを必要とするコンポーネントに最も近い親コンポーネントに状態データをプロモートすることによって実現されます。これをステータス向上といいます。
this.props.xxx - React アプリケーションでは、変更可能なデータに対して「データ ソース」が 1 つだけ存在する必要があります。通常、状態は、データをレンダリングする必要があるコンポーネントに最初に追加されます。この時点で、別のコンポーネントにもデータが必要な場合は、そのデータを最も近い親コンポーネントにリフトできます。異なるコンポーネント間で状態を同期しようとするのではなく、アプリケーション内でトップダウンのデータ フローを維持する必要があります。
#2. コンポーネント化とコンポーネント データ フロー
2.1 React におけるコンポーネントとデータ フロー##React は一方向のデータ フローであり、データは主に親ノードから子ノードに (props を介して) 渡されます。最上位 (親) プロパティの 1 つが変更されると、React はすべての子ノードを再レンダリングします。
React でコンポーネントを実装するには 2 つの方法があります。1 つは createClass メソッドで、もう 1 つは ES2015 イデオロギー クラスを通じて React.Component を継承することで実装されます。- React アプリケーション、ボタン、フォーム、ダイアログ ボックス、画面コンテンツ全体などは通常、コンポーネントとして表されます。
- React の支持者 関数型プログラミング
- および 一方向データ フロー
- : 元のインターフェイス (またはデータ) が与えられた場合、変更を適用すると、別の状態を推定できます (インターフェイスまたはデータの更新)コンポーネントは UI を独立した再利用可能なコンポーネントに分割できるため、個々のコンポーネントの構築だけに集中する必要があります。コンポーネントは概念的には、任意の入力値 (「props」と呼ばれる) を受け入れ、ページに表示する必要がある React 要素を返す関数に似ています。 1. Props の読み取り専用の性質
-
コンポーネントが関数またはクラスを使用して宣言されているかどうかに関係なく、コンポーネント自体の props を変更してはなりません。 すべての React コンポーネントは、純粋な関数のように props を使用する必要があります。 - props と State の違い
- props は property の略称で、HTML タグの属性として理解できます。小道具は読み取り専用であり、小道具はコンポーネント ツリー全体でデータと構成を転送するために使用されるため、this.props を使用して小道具を直接変更することはできません。現在のコンポーネントの props にアクセスするには、this.props を使用します。 #-- 小道具はコンポーネントの設定パラメータであり、親コントロールで選択的に設定できます。親コンポーネントは子コントロールのプロパティに値を割り当てます。プロパティの値は変更できません。子コントロール自体は、それ自体のプロパティを変更できません。
- 状態: コンポーネントがマウントされるとき、デフォルト値が設定されている場合はその状態が使用されますが、状態はいつでも変更できます。子コントロールはそれ自体の状態を管理できますが、子コントロールの状態は管理できないことに注意してください。したがって、状態は子コントロール自体にとってプライベートであると考えることができます。#- 各コンポーネントには独自の状態があります。state と props の違いは、前者 (state) はコンポーネント内にのみ存在することです。状態値を変更するには、現在のコンポーネントから this.setState のみを呼び出すことができます (直接変更することはできません) this.state!)。
#-- Props は、親コンポーネントから子コンポーネントに渡されるデータ ストリームであり、子孫コンポーネントに継続的に渡すことができます。ただし、状態はサブコンポーネント自体の内部状態を表します。意味的に言えば、コンポーネントの状態を変更すると、DOM 構造が変更されたり、再レンダリングが行われたりする可能性があります。 Props は親コンポーネントによって渡されるパラメーターであるため、レンダリングを初期化し、コンポーネント自体の状態を変更するために使用できますが、ほとんどの場合、コンポーネントの状態は外部イベントによって変更されます。知っておく必要があるのは、状態が変化したり、親コンポーネントによって渡された props が変化したりしても、render メソッドが実行される可能性があるということです。#- 通常、サブコンポーネントを更新するには、状態値を変更し、新しいサブコンポーネントの props 値を更新して更新を実現します。
2.1.1 コンポーネント間の通信1. 親コンポーネントと子コンポーネント間の通信
親プロパティと子プロパティ間の通信属性が渡されます子と親の間では、親コンポーネントがイベントを定義します。子コンポーネントが親コンポーネントでイベントをトリガーすると、親コンポーネントのデータを実パラメータの形式で変更することで通信します。
つまり:
- - * 子コンポーネントは親コンポーネントの状態を更新します—–親コンポーネントはコールバック関数を渡す必要があります—–> 子コンポーネント呼び出しトリガー
- 2. 非親子コンポーネント間の通信. 深くネストされていない非親子コンポーネントは共通の親として実装できますコンポーネントを作成し、仮パラメータを渡すことでイベント関数をトリガーします。
- Brothers コンポーネント:
(1) React の一方向データ フロー方式によると、親コンポーネントを使用して props を転送および変更する必要があります。親コンポーネントのコールバック関数を介して兄弟コンポーネントを取得します。
- 実際、この実装方法は、子コンポーネントが親コンポーネントの状態を更新する方法と似ています。
2.1.2 コンポーネントのライフサイクル
construtor() //创建组件 componentWillMount() //组件挂载之前 componentDidMount() // 组件挂载之后 componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数 shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true componentDidUpdate() // 更新 render() //渲染，react中的核心函数 componentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除
2.2 vue中的组件和数据流
2.2.1 组件化应用构建
- 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
- 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
- 在一个大型应用中，有必要将整个应用程序划分为组件，以使开发可管理。
- 组件(component)是 Vue 最强大的功能之一。组件可以帮助你扩展基本的 HTML 元素，以封装可重用代码。在较高层面上，组件是 Vue 编译器附加行为后的自定义元素。在某些情况下，组件也可以是原生 HTML 元素的形式，以特定的 is 特性扩展。
- 组件中，data必须是一个函数
- 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
2.2.2 响应式
- 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
- 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。
2.2.3 组件的生命周期
- 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
- 比如 created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
- 生命周期图示：
2.2.3 组件之间的通信
- Vue默认的是单向数据流，这是Vue直接提出来说明的，父组件默认可以向子组件传递数据，但是子组件向父组件传递数据就需要额外设置了。
- Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
- 父子组件之间的数据通信是通过Prop和自定义事件实现的，而非父子组件可以使用订阅/发布模式实现（类似于Angualr中的非父子指令之间的通信），再复杂一点也是建议使用状态管理（vuex）。
- 在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props 向下传递数据给子组件，子组件通过 events 发送消息给父组件。
1.父向子
- 每个组件实例都有自己的孤立隔离作用域。也就是说，不能（也不应该）直接在子组件模板中引用父组件数据。要想在子组件模板中引用父组件数据，可以使用 props 将数据向下传递到子组件。
- 每个 prop 属性,都可以控制是否从父组件的自定义属性中接收数据。子组件需要使用 props 选项显式声明 props，以便它可以从父组件接收到期望的数据。
- 动态Props，类似于将一个普通属性绑定到一个表达式，我们还可以使用 v-bind 将 props 属性动态地绑定到父组件中的数据。无论父组件何时更新数据，都可以将数据向下流入到子组件中
2.子向父
- 使用自定义事件
- 每个 Vue 实例都接入了一个事件接口(events interface)，也就是说，这些 Vue 实例可以做到：
- 使用 on(eventName)监听一个事件−使用emit(eventName) 触发一个事件
3. 非父子组件通信
- 可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus)，用emit触发事件，on监听事件
3.状态管理
3.1 react中的状态管理：Flux
- Redux は、React エコシステムで最も人気のある Flux 実装です。 Redux は実際にはビュー層を認識しないため、いくつかの単純なバインディングを使用して Vue で簡単に使用できます。
アクションの作成- アクションの定義。イベント トリガーでは、ディスパッチャーが追加操作、削除操作、更新操作などの一連の関数である
- 動作を呼び出す必要があります。 。
- ストアには、アプリケーションのステータスとロジックが含まれており、アプリケーション内のさまざまな状態とロジックを管理するために使用されます。モデル層に相当します
- ##ディスパッチャーでは、ストア内の対応するメソッドを register を通じて各アクションに注入します
- ビュー レイヤーのアクションのメソッドを呼び出します
- 以上です さまざまなコンポーネント
##3.2 vuevuex での状態管理
vuex は、Flux、Redux、および Elm アーキテクチャを利用しています。他のパターンとは異なり、Vuex は Vue.js 専用に設計された状態管理ライブラリであり、Vue.js のきめ細かいデータ応答メカニズムを利用して効率的に状態を更新します。これにより、簡潔な API と改善された開発エクスペリエンスを提供しながら、Vue との統合が向上します。- コンポーネントはストア インスタンスに属する状態を直接変更することはできませんが、ストアに変更を通知するイベントを配布 (ディスパッチ) するアクションを実行する必要があります。この契約の利点は、ストア内で発生するすべての状態変更を記録できると同時に、変更 (突然変異) を記録し、状態スナップショットを保存し、履歴ロールバック/タイム トラベルを実行できる高度なデバッグ ツールを実装できることです。
- すべての Vuex アプリケーションの中核はストア (倉庫) です。 「ストア」は基本的に、アプリケーション内のほとんどの状態を含むコンテナーです。
- Vuex は、次の 2 つの点で単純なグローバル オブジェクトとは異なります:
-
1 . Vuex の状態ストレージは応答性があります。 Vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。
2. ストア内の状態を直接変更することはできません。ストア内の状態を変更する唯一の方法は、ミューテーションを明示的にコミットすることです。これにより、あらゆる状態変化を簡単に追跡できるようになり、アプリケーションをより深く理解するのに役立ついくつかのツールを実装できるようになります。
3. 状態
Vuex は単一の状態ツリーを使用します - はい、1 つのオブジェクトにアプリケーション レベルのすべての状態が含まれます。現在は「単一ソース データ (SSOT)」として存在します。これは、各アプリケーションにストア インスタンスが 1 つだけ含まれることも意味します。単一の状態ツリーを使用すると、状態の特定の部分を直接見つけて、デバッグ中に現在のアプリケーション状態全体のスナップショットを簡単に取得できます。これは、各アプリケーションにストア インスタンスが 1 つだけ含まれることも意味します。 - 1. ミューテーション
Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。 Vuex のミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は、実際に状態を変更する場所であり、状態を最初のパラメータとして受け取ります。- 突然変異ハンドラーを直接呼び出すことはできません。このオプションはイベント登録に似ています: 「増分型の変異がトリガーされたとき、この関数を呼び出します。」 変異ハンドラーを起動するには、対応する型
- でstore.commit メソッドを呼び出す必要があります。 2. アクション
- アクションは、状態を直接変更するのではなく、突然変異を送信する点を除いて、突然変異に似ています。
- アクションには、任意の非同期操作を含めることができます。
- ディスパッチ配布アクション 3. モジュール
- 単一の状態ツリーを使用するため、アプリケーションのすべての状態は次の状態に集中されます。比較的大きな物体。アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。
- 4.ルーティング
- 4.1 反応におけるルーティング
- 在路由库的问题上，React 选择把问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。
- react中，需要引入react-router库，
使用时，路由器Router就是React的一个组件。 - Router组件本身只是一个容器，真正的路由要通过Route组件定义。
- Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Router>- Link组件用于取代元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本，可以接收Router的状态。
4.2 vue中的路由
- Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。
-
使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
HTML中：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>5. 渲染性能对比
- 在操作界面时，要尽量减少对DOM的操作，Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。
- 尽量减少除DOM操作以外的其他操作。（vue和react的不同）
5.1 react视图渲染
React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。
元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
- 我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。我们将 元素传入一个名为 ReactDOM.render() 的方法来将其渲染到页面上，页面上就会显示该元素。
组件渲染
- 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
5.2 vue视图渲染
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。
-
vue渲染的过程如下：
- new Vue，执行初始化
- 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
- 通过Watcher监听数据的变化
- 当数据发生变化时，Render函数执行生成VNode对象
- 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
6. 数据更新
6.1 react数据更新
- React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。
- 根据我们现阶段了解的有关 React 知识，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法
6.2 vue数据更新
7. 开发模式及规模
7.1 react
7.1.1 开发模式
- React本身，是严格的view层，MVC模式
7.1.2 规模
- Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。
7.2 vue
7.2.1 开发模式
- Vue は MVVM パターンを実装する方法です。
- Vue は MVVM モデルに完全に従っているわけではありませんが、Vue の設計は間違いなく MVVM モデルからインスピレーションを受けています。したがって、変数名 vm (ViewModel の略) は、Vue インスタンスを表すためにドキュメントでよく使用されます。
#7.2.2 スキャフォールディング
- React は create-react-app を提供しますが、まだいくつかの制限があります:
-
- プロジェクトの生成時に構成は許可されず、Vue は Yeoman のようなカスタマイズをサポートします。
- Vue では、単一ページのアプリケーションを構築するためのテンプレートが 1 つしか提供されていませんが、Vue ではさまざまな目的のためのテンプレートが提供されています。
- ユーザーが作成したテンプレートを使用してプロジェクトを構築することはできません。自己作成のテンプレートは、エンタープライズ環境で事前に確立された契約に特に役立ちます。
8. HTML&&CSS
- React では、すべてが JavaScript です。 JSXで表現できるのはHTMLだけではなく、JavaScriptにCSSを組み込んで処理するケースが増えてきています。このタイプのアプローチには利点もありますが、すべての開発者が満足できるわけではないトレードオフもあります。
- Vue の全体的なアイデアは、古典的な Web テクノロジーを採用し、それを拡張することです。
#8.1 反応##8.1.1 JSX
React では、すべてのコンポーネントのレンダリング機能は JSX に依存します。 JSX は、XML 構文を使用して JavaScript を記述するための構文糖です。
- JSX、JavaScript の構文拡張子。 React でユーザー インターフェイスを記述するには JSX を使用することをお勧めします。 JSX は一見するとテンプレート言語のように見えますが、実際には完全に JavaScript 内に実装されています。
- JSX は React で要素を宣言するために使用されます。
JSX 自体も式であり、コンパイル後、JSX は実際には通常の JavaScript オブジェクトに変換されます。これは、JSX を if または for ステートメントで実際に使用したり、変数に代入したり、パラメータとして渡したり、戻り値として使用したりできることを意味します。
JSX によると、手書きレンダリング関数は次のとおりです。これらの利点: - プログラミング言語 JavaScript のすべての機能を使用して、ビュー ページを構築できます。たとえば、一時変数や JS に付属するフロー制御を使用したり、現在の JS スコープ内の値を直接参照したりできます。
- 開発ツールの JSX サポートは、現在利用可能な他の Vue テンプレートと比較して比較的高度です (リンティング、型チェック、エディターのオートコンプリートなど)。
8.1.2 コンポーネントスコープの CSS
コンポーネントを複数のファイル (CSS モジュールなど) に分散しない限り, CSS スコープは、CSS-in-JS ソリューション (styled-components、glamorous、emotion など) を通じて React に実装されます。これにより、通常の CSS 作成プロセスとは異なる、コンポーネント指向の新しいスタイリング パラダイムが導入されます。さらに、ビルド時に CSS を別のスタイルシートに抽出することはサポートされていますが、通常、これらのスタイルを有効にするためにバンドルにランタイム プログラムが必要です。 JavaScript を使用してスタイルを柔軟に処理できますが、バンドルのサイズと実行時のオーバーヘッドを考慮する必要もあります。
8.2.1 テンプレートテンプレートの構文
実際、Vue はレンダリング機能も提供し、JSX もサポートしています。ただし、デフォルトの推奨事項はテンプレートです。仕様に準拠する HTML はすべて合法的な Vue テンプレートであり、これにはいくつかの独自の利点もあります:
- HTML に慣れている多くの開発者にとって、テンプレートは JSX よりも読み書きが簡単です。もちろん主観的な好みの要素はありますが、この違いが開発効率の向上につながるのであれば、客観的な価値があります。
- HTML ベースのテンプレートを使用すると、既存のアプリケーションを段階的に Vue に移行することが容易になります。
- これにより、デザイナーや新しい開発者がプロジェクトを理解し、プロジェクトに参加しやすくなります。
- Pug などの他のテンプレート プリプロセッサを使用して Vue テンプレートを作成することもできます。
- Vue.js は HTML ベースのテンプレート構文を使用しており、これにより開発者は DOM を基礎となる Vue インスタンスのデータに宣言的にバインドできます。すべての Vue.js テンプレートは正当な HTML であり、仕様に準拠するブラウザおよび HTML パーサーで解析できます。
基礎となる実装では、Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。応答システムと組み合わせると、Vue はコンポーネントの再レンダリングの最小コストをインテリジェントに計算し、アプリケーションの状態が変化したときにそれを DOM 操作に適用できます。 - 8.2.2 単一ファイル コンポーネント CSS
Vue がスタイルを設定するデフォルトの方法は、単一ファイルのスタイルに似たタグです。ファイルコンポーネント。
単一ファイル コンポーネントを使用すると、コンポーネント コードの一部として同じ- ファイル内の CSS
- を完全に制御できます。
Vue の単一ファイル コンポーネントのスタイル設定は非常に柔軟です。 vue-loader を使用すると、任意のプリプロセッサ、ポストプロセッサを使用でき、CSS モジュールを深く統合することもできます。これらはすべて
9.1 反応を選択します #Vue と React の両方で実装された単純なアプリケーションでは、開発者は無意識のうちに Vue を好む可能性があります。これは、テンプレートベースのアプリケーションが一目で理解しやすく、実行が速いためです。しかし、これらの利点により、アプリケーションをより大規模に拡張することを妨げる技術的負債が生じます。テンプレートは、気づきにくいランタイム エラーを起こしやすく、テスト、リファクタリング、分解も困難です。 React Native は Javascript を使用するフレームワークですモバイル アプリを構築するためのネイティブ アプリケーション (iOS、Android) のライブラリ。これは React.js と同じですが、Web コンポーネントを使用する代わりにネイティブ コンポーネントを使用します。 React.js を学習していれば、すぐに React Native を使い始めることができますし、その逆も同様です。 React が現在最も人気のあるフロントエンド フレームワークであることは疑いの余地がありません。月間ダウンロード数は NPM で 250 万件を超えていますが、Vue では 225,000 件です。人気とは単なる表面的な数字ではなく、記事、チュートリアル、Stack Overflow への回答が増えることを意味し、プロジェクトで使用できるツールやプラグインが増えることを意味し、開発者はもはや孤独ではなくなります。 ##9.2.1 テンプレート構築アプリケーションを楽しみにしています - Vue Vue アプリケーションのデフォルト オプションは、HTML ファイルにマークアップを配置することです。データ バインディング式は、Angular と同様のMustache 構文を使用し、ディレクティブ (特別な HTML 属性) を使用してテンプレートに機能を追加します。 対照的に、React アプリケーションはテンプレートを使用せず、開発者は JSX を使用して JavaScript で DOM を作成する必要があります。 9.2.3 アプリケーションはできる限り小さく高速であることを期待してください - Vue を選択してください クライアント側レンダリング ルート: 1. HTML をリクエストします -> 2. サーバーは HTML を返します -> 3. ブラウザは HTML 内の js/css ファイルをダウンロードします -> 4. js ファイルがダウンロードされるのを待ちます -> 5. js がロードされ初期化されるのを待ちます-> 6. js コードがついに動作します 実行すると、js コードがバックエンド (ajax/fetch) からデータをリクエストします -> 7. バックエンド データが返されるのを待ちます -> 8. 反応 dom (クライアント) がレンダリングしますデータを最初から応答ページに追加 サーバー側レンダリング ルート: 1. HTML をリクエスト -> 2. サーバー側リクエスト データ (イントラネット リクエストは高速です) -> 3サーバー側の初期レンダリング (サーバー側のパフォーマンスが高く、高速です) -> 4. サーバーは、既に正しいコンテンツを含むページを返します -> 5. クライアントは js/css ファイルをリクエストします -> 6. js ファイルがダウンロードされるのを待ちます -> 7. js がロードされ初期化されるのを待ちます -> 8. 反応 dom (クライアント) が残りの部分のレンダリングを完了します (小さなコンテンツ、高速レンダリング) 10.1 react React の仮想 DOM は、サーバーサイドで使用するための鍵ですレンダリング。まず、各 ReactComponent は仮想 DOM でレンダリングされ、次に React は仮想 DOM を使用してブラウザ DOM の変更された部分を更新します。仮想 DOM はメモリ内 DOM 表現として機能し、非仮想 DOM で React に最高のパフォーマンスを提供します。 Node.js などのブラウザ環境。これにより、React が仮想 DoM から文字列を生成できる可能性が得られます。これにより、実際の DOM を更新する代わりに、クライアントとサーバーで同じ React コンポーネントを使用できるようになります。 React は、サーバー側レンダリング コンポーネントに使用できる 2 つの関数、React.renderToString と React.render-ToStaticMarkup を提供します。サーバー側レンダリング用の ReactComponent を設計するときは、積極的に行う必要があり、次の側面を考慮する必要があります。 #10.2 vue 1. サーバーサイド レンダリング (SSR) とは何ですか? サーバー レンダリングされた Vue.js アプリケーションは、アプリケーションのコードのほとんどがサーバーとクライアントの両方で実行できるため、「同型」または「ユニバーサル」であると見なすこともできます。 2. サーバー側レンダリングの利点 - 検索エンジン クローラーが完全にレンダリングされたページを直接表示できるため、SEO が向上します。 #2. 作成React を使用した静的バージョン データ モデルを渡し、UI をレンダリングしますが、対話は行われません。これらのプロセスを分離するのが最善です。静的バージョンの作成には、より多くのコーディングが必要であり、論理的思考はそれほど必要ではありませんが、インタラクションを追加するには、コーディングよりも論理的思考が必要になるためです。 サンプル アプリケーションのデータについて考えてみましょう。それぞれを見て、どれが状態であるかを見つけてください。各データについて考慮すべき質問は 3 つだけです。 アプリケーション内の各状態について: 概要 要約すると、Vue の利点は次のとおりです。 -シンプルな構文とプロジェクトの作成 - レンダリング速度の高速化とサイズの縮小 React の利点は次のとおりです。 - 両方の Web に適用可能 - 大規模なエコシステムにより、より多くのサポートとツールが提供されます - 実際、React と Vue はどちらも非常に優れたフレームワークです。両者は異なるというよりも類似しており、最も優れた機能のほとんどは同じです: 仮想 DOM
#9. 使用シナリオ
対照的に、JavaScript テンプレートは、再利用可能でテストしやすい、適切な分解とドライ (DRY) コードを備えたコンポーネントに編成できます。 Vue にもコンポーネント システムとレンダリング機能がありますが、React のレンダリング システムはより構成可能で、浅いレンダリングなどの機能があり、React のテスト ツールと組み合わせて使用すると、コードをよりテストしやすく保守しやすくすることができます。
9.1.2 Web アプリとネイティブ APP の両方に適したフレームワークを楽しみにしています - React を選択してください
その重要性は、開発者が Web アプリケーションとモバイル ネイティブ アプリケーションを開発するために必要なのは一連の知識とツールだけであることです。 Web 開発とモバイル開発を同時に行いたい場合、React は素晴らしい贈り物を用意しています。
9.1.3 最大のエコシステムを期待 - React を選択
どちらのフレームワークもオープンソースですが、React は Facebook で生まれ、Facebook によって承認されており、開発者と Facebook の両方が React を維持し続けることを約束します。対照的に、Vue は独立系開発者の You Yuxi 氏の作品です。 You Yuxi は現在 Vue をフルタイムで保守しており、Vue に資金を提供している企業もいくつかありますが、その規模は Facebook や Google には及びません。ただし、Vue のチームがその小規模さと独立性のために不利になっているわけではないのでご安心ください。Vue のリリース サイクルは固定されています。さらに賞賛に値するのは、Vue には Github 上でオープンな問題が 54 件しかなく、クローズされた問題が 3456 件しかないことです。比較として、 React には、未解決の問題が 530 件、クローズされた問題が 3,447 件あります。
#9.2 vue の選択 テンプレートは、標準的な Web 開発手法から来た新しい開発者にとって理解しやすいものです。しかし、上級開発者の中にはテンプレートを好む人もいます。テンプレートはレイアウトと機能をより適切に分離でき、Pug などのテンプレート エンジンも使用できるからです。
9.2.2 シンプルで「うまく機能する」ものを期待します – Vue を選択します
Vue のシンプルさはプログラミングにさらに深く反映されています。2 つのフレームワークがアプリケーション データ (つまり、状態) をどのように処理するかを比較してみましょう。
Vue のデータは変更されているため、同じ操作がより簡潔に見えます。
Vue で状態管理がどのように行われるかを見てみましょう。新しいオブジェクトを状態に追加すると、Vue はその中のすべてのプロパティをトラバースし、ゲッター メソッドとセッター メソッドに変換します。これで、Vue の応答システムが状態の追跡を開始し、状態のコンテンツが変化すると自動的に変更されます。 . DOM を再レンダリングします。賞賛に値するのは、Vue で状態を変更する操作が簡単であるだけでなく、その再レンダリング システムも React よりも高速かつ効率的であることです。
Vue コア開発者はベンチマーク テストを提供し、Vue のレンダリング システムが React のレンダリング システムよりも高速であることを示しました。テスト方法は、10,000 項目のリストを 100 回レンダリングすることです。結果は次のとおりです。実用的な観点から見ると、このベンチマークは特殊なケースにのみ関連しており、ほとんどのアプリケーションではあまり頻繁に実行されないため、重要な比較ポイントとはみなされません。ただし、ページ サイズはすべてのプロジェクトに関係しており、ここでも Vue が先頭に立ち、現在のバージョンの重さは圧縮でわずか 25.6 KB です。 React で同じ機能を実現するには、React DOM (37.4KB) と React with Addon ライブラリ (11.4KB) が必要で、合計 44.8KB となり、Vue のほぼ 2 倍のサイズになります。サイズが 2 倍だからといって、機能が 2 倍になるわけではありません。 10. サーバー側レンダリング (SSR)
##1. UI ダイアグラムをコンポーネント レベルに分割
4. 状態をどこに置くかを決定します
による高速レンダリング - 軽量
- レスポンシブなフォーマットとコンポーネント化
- サーバーサイド レンダリング - ルーティング ツール、パッケージング ツール、および状態管理ツールの統合が容易 - 優れたサポートとコミュニティ
関連する推奨事項: 「
vue.js チュートリアル
>>
以上がReactJSとVUEJSの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。