摘要：的響應核心的響應式系統是支撐整個框架運行的關鍵，也是的核心之一，官方對這個核心的分層設計得很好也是依靠其驅動原生視圖。我們日常用到的都由核心提供，對這個核心稍作修改，去掉和，意外的獲得了一個極小的響應核心，可以運行于任何標準引擎下。

GitHub: react-vue

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

使用 Vue 的響應式系統驅動 React 渲染

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

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

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

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

我們日常用到的 data、computed、watch、methods、lifecycle、render 都由核心提供，對這個核心稍作修改，去掉 render 和 lifecycle，意外的獲得了一個極小的響應核心（gzip 9kb），可以運行于任何標準 JS 引擎下。這構成了 react-vue 的核心。

react-vue 額外添加了一個 observer 函數，用于觀察 react 組件，并與響應核心建立聯系。

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

如上代碼實現了一個簡單的遞增計數器，如果你接觸過 mobx，對這種開發模式應該會很熟悉。

使用 Vue 的響應核心驅動 React，還能獲得另一個禮物 Vuex，這里有一個將 Vuex 與 React 結合的簡單 demo，如此，你便可以在 React 體系下使用 Vuex 構建大型應用。

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

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

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

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

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

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

react-vue 有其局限性，編譯過來的 Vue 組件依舊跑在 React 的運行時，所以你不能使用 Vue 提供的 render 函數（使用 template 代替），你也無法在 Vue 組件內訪問 VNode。可以查看詳細的 API 支持文檔。

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

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

是不是有點 Weex 的意思了，Native 不同于 Web，在 Web 下用慣了的標簽，在 Native 下都是沒有的，React Native 官方提供的所有組件，都作為內置組件預先引入了，你無需引用可直接使用。當然，如果習慣了 Web 標簽，可以這樣

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

Vue.component("div", View);

export default Vue;

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