VueとReactはどのような違いがありますか？

4260 ワード
vue react 違います
一、モニターデータの変化の実現原理が異なる
  • Vueはgetter/setterといくつかの関数のハイジャックを通じて、データの変化を正確に知ることができます。特別な最適化を必要としないで、良い性能を達成することができます。
  • Reactデフォルトは、参照を比較することによって行われ、最適化しないと、不必要なVDOMが大量にレンダリングされる可能性がある
    • 。
    なぜReactは正確にデータの変化を監督しないのですか？これはVueとReactの設計理念の違いで、Vueは可変データを使っていますが、Reactはデータの可変性をより強調しています。だから善し悪しはないというべきか、Vueはもっと簡単で、Reactは大型アプリケーションを構築する時にもっとロバストです。
    二、データストリームの違い
  • みんなが知っています。Vueのデフォルトは双方向バインディングをサポートしています。Vue 1.0では、2つの双方向結合が可能です。
    • 
props
v-model
  • はVue 2.xの中で第1種を取り除いて、つまり親子のコンポーネントの間で双方向に結び付けることができませんでした（しかし、文法飴を提供しました。自動的にイベントを通して修正してくれます）、そしてVue 2.xはもうコンポーネントが自分のpropsに対していかなる修正を行うことを奨励しませんでした。
  • しかし、Reactは誕生当初から双方向バインディングをサポートしておらず、Reactは一方向データストリームを提唱しています。彼はオン・チャング・セット（）モードと呼ばれています。でも、私たちはVuexやReduxなどの一方通行のデータフローの状態管理フレームを使っていますので、その違いを感じられないことが多いです。
    • 三、HOCとmixins
    Vueでは私たちが異なる機能を組み合わせる方式はmixinを通して、ReactではHOCを通します。Reactも最初はmixinsを使っていましたが、このようなやり方はコンポーネントに侵入するのが強すぎて多くの問題を引き起こすと思い、mixinxを捨ててHoCに変えました。mixinについてはどこが悪いですか？React公式のこの文章を参照してください。Vueはずっとmixinを使って実現しています。
    しかし、なぜVueはHOC方式で実現しないのですか？
    高次コンポーネントの本質は高次関数であり，Reactのコンポーネントは純粋な関数であるので，高次関数はReactにとって非常に簡単である。でも、Vueはだめです。Vueの中のコンポーネントは包装された関数です。簡単ではないのはコンポーネントを定義する時に入ってきたオブジェクトや関数です。たとえば私たちが定義したテンプレートはどうやってコンパイルされますか？例えば声明のpropsはどうやって受信しましたか？これらは全部vueがコンポーネントのインスタンスを作る時に陰的にすることです。vueさんは黙々としていろいろなことをしてくれましたので、私達自身は直接にコンポーネントの声明を包装して高次のコンポーネントに戻したら、この包装されたコンポーネントは正常に動作しません。
    四、コンポーネント通信の違い

    Vueにはコンポーネント通信が可能な3つの方法がある。
  • 親コンポーネントは、プロpsを介してサブアセンブリにデータまたはコールバックを伝達し、コールバックを伝達することができるが、データのみを一般的に送信し、イベントのメカニズムによって、サブアセンブリの親コンポーネントへの通信
    • を処理する。
  • サブコンポーネントは、イベントを通じて親コンポーネントにメッセージを送信する
    • 。
  • は、V 2.0に新たに追加されたprovide/injectによって、親コンポーネントからサブアセンブリへのデータの注入を実現し、複数の階層にまたがることができる。
    • Reactには、対応する3つの方法があります。
  • 親コンポーネントは、プロpsによって、データをサブアセンブリに転送することができ、または、
    • にフィードバックすることができる。
  • はcontextを通じて階層的な通信を行うことができます。これはprovide/injectの役割と同じです。
    • React自体はカスタムイベントをサポートしていないことが分かります。Vue中性子コンポーネントは、イベントとコールバック関数を父コンポーネントに伝達し、Vueはイベントを使用する傾向があります。しかし、Reactでは私たちはすべてコールバック関数を使っています。これは彼らの2つの最大の違いかもしれません。
    五、レンダリングテンプレートの違い
    表層では、テンプレートの文法が違います。
  • ReactはJSXによるレンダリングモデル
    • である。
  • 、Vueは一種の拡張されたHTML文法によってレンダリングされる。
    • しかし、これは表面的な現象です。結局ReactはJSXに依存しなくてはいけません。深層では、テンプレートの原理が違っています。これこそ彼らの本質的な違いです。
  • ReactはコンポーネントJSコードの中で、元のJSを通じてテンプレートの中のよくある文法を実現します。例えば、補間、条件、循環などはJS文法によって実現された
    • です。
  • VueはコンポーネントJSコードと分離した単独のテンプレートであり、条件文がv-i-fを必要とするなどの命令によって実現される。
    • reactにおけるレンダー関数はクローズド特性をサポートしているので、我々importのコンポーネントはレンダーで直接呼び出されます。しかし、Vueでは、テンプレートで使用するデータはすべてthisにかけて中継しなければならないので、私たちはimponentsのコンポーネントが終わったら、componentsの中で再声明を出す必要があります。これは明らかにおかしいですが、またこのようなやり方をしなければなりません。
    六、VuexとReduxの違い
    表面的には、store注入と使用方法に違いがあります。Vuexでは、$storeはコンポーネント・インスタンスに直接注入されるので、より柔軟に使用することができる。
  • dispatchとcomitを使って更新
    • を提出します。
  • は、mapStateまたは直接にthis.$storeによってデータを読み込みます。
    • Reduxでは、私たちの各コンポーネントは必要なconnectで必要なpropsとdispatchを接続します。
    また、Vuexはもっと柔軟で、コンポーネントの中でdispatch actionもcomit udatesもできます。Reduxではdispatchしかできません。直接reducerを呼び出して修正することはできません。
    実現原理から言えば、最大の違いは2点です。
  • Reduxは可変データではなく、Vuexのデータは可変です。Reduxは毎回新しいstateで古いstateを交替します。Vuexは直接
    • を修正します。
  • Reduxはデータの変化を測定する時、diffの方式を通じて(通って)違いを比較したので、Vuexは実はVueの原理と同じで、getter/setterを通して比較したのです。
    • 七、diffはアルゴリズムが違います。
    両方の流れの考え方は同じで、両方の仮定に基づいています。
  • の異なるコンポーネントは、異なるDOM構造を生成する。typeが合わない時、DOMに対応して操作して直接古いDOMを破壊して、新しいDOMを創建します。
  • 同じレベルのサブノードのセットは、唯一のkeyによって区別されてもよい。
    • しかし、両者のソースの実現には違いがあります。
  • Vueはsnabbdomライブラリに基づいて、より良い速度とモジュール機構があります。Vue Diffは双方向チェーンを使って比較しながらDOMを更新します。
  • Reactは主にdiffキューを使用して、どのDOMを更新する必要がありますか？patchツリーを取得して、また一括操作でDOMを更新します。

    • 八、事件のメカニズムが異なる
    Vue
  • Vue原生イベント使用標準Webイベント
  • Vueコンポーネントカスタムイベント機構は、親子コンポーネント通信ベース
    • である。
  • Vue snabbdomライブラリのモジュールプラグインを合理的に利用しました。
    • React
  • React原生事件は包装されています。すべての事件はトップレベルのdocumentで傍聴して、ここで合成事件が発生します。このセットに基づいて，ウェブDOMとの強い結合ではなく，端を横切ってイベント機構を使用することができる。
  • Reactコンポーネントにイベントはなく、親子コンポーネント通信はprops
    • を使用する。
    以上がVueとReactの違いの詳細です。VueとReactに関する資料は他の関連記事に注目してください。
    iTextを利用してJSPでPDFレポートを生成する。
    CSSの検索マッチング原理を理解し、CSSをより簡潔で効率的にする。