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 框架运行的关键,也是 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 构建,效果还不错,你可以看看。