用 Vue 来写 React 和 ReactNative
|
前言react-vue 为两大前端框架搭了一座桥，它主要有三种用法
这篇文章会向大家介绍 react-vue 的三种用法及一些实现细节，它能做到什么程度，以及它带来的一些可能性。需要提前知会的一点：如果你熟悉 React 和 Vue，在这里你不会接触到任何新的概念。 Vue 的响应核心Vue 的响应式系统是支撑整个 Vue 框架运行的关键，也是 Vue 的核心之一，官方对这个核心的分层设计得很好（Weex 也是依靠其驱动原生视图）。若你有幸看过 Vue 的源码，这个核心就在它的 core 目录下。 我们日常用到的 响应式的 Reactreact-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 组件库做了一个测试，通过 react-vue 有其局限性，编译过来的 Vue 组件依旧跑在 React 的运行时，所以你不能使用 Vue 提供的 render 函数（使用 template 代替），你也无法在 Vue 组件内访问 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 服务器，监听项目中 是不是有点 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 构建，效果还不错，你可以看看。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |