用 Vue 來寫 React 和 ReactNative

GitHub: react-vue

前言

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

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

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

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

這篇文章會向你們介紹 react-vue 的三種用法及一些實現細節，它能作到什麼程度，以及它帶來的一些可能性。須要提早知會的一點：若是你熟悉 React 和 Vue，在這裏你不會接觸到任何新的概念。

Vue 的響應核心

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

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

響應式的 React

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 <h1 onClick={store.increase}>{store.count}</h1>;
  }
}

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

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

React 下運行 Vue 組件

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 <Two>Hello Vue</Two>;
  }
}

<!-- Two.vue -->
<template>
  <div @click="count++">
    <three>{{count}}</three>
    <slot></slot>
  </div>
</template>

<script>
  import Three from './Three'
  export default {
    components: { Three },
    data () {
      return {
        count: 0
      }
    }
  }
</script>

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

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

這種混合開發讓技術棧的切換成本變得很低，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 Native 下運行 Vue 組件

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

<template>
  <view>
    <text>Hello react-vue-native</text>
  </view>
</template>

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 構建，效果還不錯，你能夠看看。