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 构建,结果还不错,你能够看看。