ReactJSとVUEJSの違いは何ですか

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: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 が破棄されると、すべてのイベント ハンドラーが自動的に削除されます。自分で掃除することを心配する必要はありません。
  #1.1.6 フォーム コントロール

v-model はフォーム コントロール要素に双方向のデータ バインディングを作成します

• 1.1.7 計算プロパティ

計算プロパティは、テンプレートにロジックを入れすぎると発生する問題に対処するために Vue に導入されました。テンプレート パスは重く、メンテナンスが困難です。これにより、上記の問題が解決されるだけでなく、テンプレートとビジネス ロジックをより適切に分離することができます。

#1.1.8 ajax データ リクエスト

vue2.0 # でのデータ リクエストには axios を使用することをお勧めします##注意:

Vue の依存関係追跡は [原則として双方向バインディングです。はサポートされていません。v-model これは 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});
複数の制御された入力要素がある場合、各要素の属性に名前を追加して、ハンドラーが何を選択できるようにすることができます。 event.target.name の値に基づいて実行します。

1.2.5 ステータスの改善

• React では、状態共有は、データを必要とするコンポーネントに最も近い親コンポーネントに状態データをプロモートすることによって実現されます。これをステータス向上といいます。 this.props.xxx
• React アプリケーションでは、変更可能なデータに対して「データ ソース」が 1 つだけ存在する必要があります。通常、状態は、データをレンダリングする必要があるコンポーネントに最初に追加されます。この時点で、別のコンポーネントにもデータが必要な場合は、そのデータを最も近い親コンポーネントにリフトできます。異なるコンポーネント間で状態を同期しようとするのではなく、アプリケーション内でトップダウンのデータ フローを維持する必要があります。

#2. コンポーネント化とコンポーネント データ フロー

2.1 React におけるコンポーネントとデータ フロー##React は一方向のデータ フローであり、データは主に親ノードから子ノードに (props を介して) 渡されます。最上位 (親) プロパティの 1 つが変更されると、React はすべての子ノードを再レンダリングします。

• 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 値を更新して更新を実現します。

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 アプリケーションの中核はストア (倉庫) です。 「ストア」は基本的に、アプリケーション内のほとんどの状態を含むコンテナーです。
Vuex は、次の 2 つの点で単純なグローバル オブジェクトとは異なります:

• 1 . Vuex の状態ストレージは応答性があります。 Vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。

  2. ストア内の状態を直接変更することはできません。ストア内の状態を変更する唯一の方法は、ミューテーションを明示的にコミットすることです。これにより、あらゆる状態変化を簡単に追跡できるようになり、アプリケーションをより深く理解するのに役立ついくつかのツールを実装できるようになります。

  3. 状態

  Vuex は単一の状態ツリーを使用します - はい、1 つのオブジェクトにアプリケーション レベルのすべての状態が含まれます。現在は「単一ソース データ (SSOT)」として存在します。これは、各アプリケーションにストア インスタンスが 1 つだけ含まれることも意味します。単一の状態ツリーを使用すると、状態の特定の部分を直接見つけて、デバッグ中に現在のアプリケーション状態全体のスナップショットを簡単に取得できます。これは、各アプリケーションにストア インスタンスが 1 つだけ含まれることも意味します。
• 
  
状態から状態値を取得する: リストのフィルタリングやカウントなど、ストア内の状態から何らかの状態を取得する必要がある場合があります。
• 1. ミューテーション
  
  Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。 Vuex のミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は、実際に状態を変更する場所であり、状態を最初のパラメータとして受け取ります。
  • 突然変異ハンドラーを直接呼び出すことはできません。このオプションはイベント登録に似ています: 「増分型の変異がトリガーされたとき、この関数を呼び出します。」 変異ハンドラーを起動するには、対応する型
  • でstore.commit メソッドを呼び出す必要があります。
  2. アクション
  アクションは、状態を直接変更するのではなく、突然変異を送信する点を除いて、突然変異に似ています。

  • アクションには、任意の非同期操作を含めることができます。
  • ディスパッチ配布アクション

  3. モジュール
  • 単一の状態ツリーを使用するため、アプリケーションのすべての状態は次の状態に集中されます。比較的大きな物体。アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。
  Vuex を使用すると、ストアをモジュールに分割できます。各モジュールには独自の状態、突然変異、アクション、ゲッター、さらにはネストされたサブモジュールがあり、上から下まで同じ方法で分割されています

• 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 モジュールを深く統合することもできます。これらはすべて

• より抽象的に見ると、コンポーネントを 2 つのカテゴリに分類できます。1 つは 部分的にビューベース (プレゼンテーション)、もう 1 つは 部分的に論理 (論理) です。前者にはテンプレートを使用し、後者には JSX またはレンダリング関数を使用することをお勧めします。これら 2 種類のコンポーネントの割合はアプリケーションの種類によって異なりますが、全体としては、論理コンポーネントよりも表示コンポーネントの方がはるかに多いことがわかります。

以上がReactJSとVUEJSの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。