摘要：的響應(yīng)核心的響應(yīng)式系統(tǒng)是支撐整個(gè)框架運(yùn)行的關(guān)鍵，也是的核心之一，官方對(duì)這個(gè)核心的分層設(shè)計(jì)得很好也是依靠其驅(qū)動(dòng)原生視圖。我們?nèi)粘Ｓ玫降亩加珊诵奶峁?，?duì)這個(gè)核心稍作修改，去掉和，意外的獲得了一個(gè)極小的響應(yīng)核心，可以運(yùn)行于任何標(biāo)準(zhǔn)引擎下。

GitHub: react-vue

react-vue 為兩大前端框架搭了一座橋，它主要有三種用法

使用 Vue 的響應(yīng)式系統(tǒng)驅(qū)動(dòng) React 渲染

使用 react-vue-loader 將 Vue 組件編譯成 React 組件

使用 react-vue-native-script 在 React Native 下運(yùn)行 Vue 組件

這篇文章會(huì)向大家介紹 react-vue 的三種用法及一些實(shí)現(xiàn)細(xì)節(jié)，它能做到什么程度，以及它帶來(lái)的一些可能性。需要提前知會(huì)的一點(diǎn)：如果你熟悉 React 和 Vue，在這里你不會(huì)接觸到任何新的概念。

Vue 的響應(yīng)式系統(tǒng)是支撐整個(gè) Vue 框架運(yùn)行的關(guān)鍵，也是 Vue 的核心之一，官方對(duì)這個(gè)核心的分層設(shè)計(jì)得很好（Weex 也是依靠其驅(qū)動(dòng)原生視圖）。若你有幸看過(guò) Vue 的源碼，這個(gè)核心就在它的 core 目錄下。

我們?nèi)粘Ｓ玫降?data、computed、watch、methods、lifecycle、render 都由核心提供，對(duì)這個(gè)核心稍作修改，去掉 render 和 lifecycle，意外的獲得了一個(gè)極小的響應(yīng)核心（gzip 9kb），可以運(yùn)行于任何標(biāo)準(zhǔn) JS 引擎下。這構(gòu)成了 react-vue 的核心。

react-vue 額外添加了一個(gè) observer 函數(shù)，用于觀察 react 組件，并與響應(yīng)核心建立聯(lián)系。

import React, { Component } from "react";
import Vue, { observer } from "react-vue";

const store = new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increase () {
      this.count ++;
    }
  }
});

@observer
export default class Demo extends Component {
  render () {
    return 
{store.count}
;
  }
}

如上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的遞增計(jì)數(shù)器，如果你接觸過(guò) mobx，對(duì)這種開(kāi)發(fā)模式應(yīng)該會(huì)很熟悉。

使用 Vue 的響應(yīng)核心驅(qū)動(dòng) React，還能獲得另一個(gè)禮物 Vuex，這里有一個(gè)將 Vuex 與 React 結(jié)合的簡(jiǎn)單 demo，如此，你便可以在 React 體系下使用 Vuex 構(gòu)建大型應(yīng)用。

react-vue 支持將 Vue 組件編譯到 React，只需引入 react-vue-loader，這個(gè) loader 基于 vue-loader 做了一些改造以適應(yīng) React 的運(yùn)行環(huán)境。我們幾乎可以使用 vue-loader 提供的所有配置，詳細(xì)的文檔可以參考這里。如下是一個(gè)你可能會(huì)用到的 webpack 配置

module: {
  rules: [
    {
      test: /.vue$/,
      loader: "react-vue-loader"
    }
  ]
}

很簡(jiǎn)單對(duì)吧，React 和 Vue 的混合開(kāi)發(fā)模式會(huì)產(chǎn)生一些很有趣的事情，你寫(xiě)的 React 組件，可以直接在 Vue 組件內(nèi)使用，反過(guò)來(lái) Vue 組件也可以直接在 React 組件內(nèi)運(yùn)行。

// One.js
import React, { Component } from "react";
import Two from "./Two";

export default class One extends Component {
  render() {
    return Hello Vue;
  }
}

// Three.js
import React, { Component } from "react";

export default class Three extends Component {
  render () {
    return {this.props.children}
  }
}

這種混合開(kāi)發(fā)讓技術(shù)棧的切換成本變得很低，React 和 Vue 也不再是非此即彼，如果你的團(tuán)隊(duì)在 React 下積累深厚，想嘗試一下 Vue 開(kāi)發(fā)帶來(lái)的快感，引入一個(gè) loader 就可以了；如果你的團(tuán)隊(duì)在 Vue 下造詣?lì)H深，想試試 React 帶來(lái)的思維淬煉，搭建一個(gè) React 的運(yùn)行環(huán)境，之前寫(xiě)的 Vue 代碼也可在其上良好的運(yùn)行。

react-vue 對(duì)組件庫(kù)的開(kāi)發(fā)也提供了新的思路，你只需寫(xiě)一套 Vue 組件，即可同時(shí)運(yùn)行于 React 和 Vue。這里有一個(gè)項(xiàng)目對(duì) vue-material 組件庫(kù)做了一個(gè)測(cè)試，通過(guò) npm install --save vue-material 安裝組件庫(kù)，在 React 下可以運(yùn)行其中 20/29 的組件。

react-vue 有其局限性，編譯過(guò)來(lái)的 Vue 組件依舊跑在 React 的運(yùn)行時(shí)，所以你不能使用 Vue 提供的 render 函數(shù)（使用 template 代替），你也無(wú)法在 Vue 組件內(nèi)訪(fǎng)問(wèn) VNode。可以查看詳細(xì)的 API 支持文檔。

這可能是最有趣的一部分了，react-vue 的響應(yīng)核心是平臺(tái)無(wú)關(guān)的，它可以跑在 React 下，自然也能跑在 React Native 下。

React Native 使用了一個(gè)量身定制的打包工具，我們無(wú)法像 Web 那樣引入一個(gè) loader 來(lái)實(shí)現(xiàn)無(wú)縫接合。你可以使用 react-vue-native-scripts，一個(gè) npm 腳本，開(kāi)啟一個(gè)輕量的 node 服務(wù)器，監(jiān)聽(tīng)項(xiàng)目中 .vue 文件的變化，生成一份同名的 .js 文件。

是不是有點(diǎn) Weex 的意思了，Native 不同于 Web，在 Web 下用慣了的標(biāo)簽，在 Native 下都是沒(méi)有的，React Native 官方提供的所有組件，都作為內(nèi)置組件預(yù)先引入了，你無(wú)需引用可直接使用。當(dāng)然，如果習(xí)慣了 Web 標(biāo)簽，可以這樣

import { View } from "react-native";
import { Vue } from "react-vue";

Vue.component("div", View);

export default Vue;

這里有一個(gè) Hacker News 的 demo，使用 React Native 作為底層，上層使用 Vue 和 Vuex 構(gòu)建，效果還不錯(cuò)，你可以看看。