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

GitHub: react-vue

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

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

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

使用 react-vue-native-script 在 React Native 下運行 Vue 組件

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

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

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

react-vue 額外添加了一個 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}
;
  }
}

如上代碼實現(xiàn)了一個簡單的遞增計數(shù)器，如果你接觸過 mobx，對這種開發(fā)模式應(yīng)該會很熟悉。

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

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

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

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

// 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}
  }
}

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

react-vue 對組件庫的開發(fā)也提供了新的思路，你只需寫一套 Vue 組件，即可同時運行于 React 和 Vue。這里有一個項目對 vue-material 組件庫做了一個測試，通過 npm install --save vue-material 安裝組件庫，在 React 下可以運行其中 20/29 的組件。

react-vue 有其局限性，編譯過來的 Vue 組件依舊跑在 React 的運行時，所以你不能使用 Vue 提供的 render 函數(shù)（使用 template 代替），你也無法在 Vue 組件內(nèi)訪問 VNode?？梢圆榭丛敿?xì)的 API 支持文檔。

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

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

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

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

Vue.component("div", View);

export default Vue;

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