React 组件转 Vue 组件的命令写法

@H_404_0@基于目前React和Vue比较火，开发<a target="blank" href="https://github.com/vicwang163/react-to-vue/">react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面

@H4040@

简介@H4045@

@H404_0@对于react-to-vue工具，转化的是基本的react component，而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件，其中也可以包括发请求。

@H_4040@本文先介绍两个框架的组件共性和不兼容的地方，再介绍react-to-vue的使用和原理。在实际业务中，陆金所100多个的react基础业务组件，react-to-vue可以转化90%以上，变成vue组件。

@H4040@
盘点两个框架的组件共性@H4045@

@H4040@
1. props@H404_5@

<div class="jb51code">
<pre class="brush:js;">
// react
FrontendMagazine.propTypes = {
name: PropTypes.string
}
FrontendMagazine.defaultProps = {
name: 'FrontendMagazine'
}
// vue
{
name: 'frontend-magazine',props: {
name: {
type: String,default: 'FrontendMagazine'
}
}
}

React 组件转 Vue 组件的命令写法

1. props@H404_5@

<div class="jb51code">
<pre class="brush:js;">
// react
FrontendMagazine.propTypes = {
name: PropTypes.string
}
FrontendMagazine.defaultProps = {
name: 'FrontendMagazine'
}
// vue
{
name: 'frontend-magazine',props: {
name: {
type: String,default: 'FrontendMagazine'
}
}
}

2. 组件自有状态@H_404_5@
@H_404_0@ 框架说明函数来设置值，不同于react的state，vue是响应式 @H_404_0@

3. 生命周期@H_404_5@
@H_404_0@虽然生命周期名不一样，但是差不多有对应的

4. 处理事件@H_404_5@
@H_404_0@ 框架说明方法上

// react class FrontendMagazine { clickme () { // xxxx } } // vue { name: 'frontend-magazine',methods: { clickme () { // xxx } } }

@H_404_0@

5. 组件错误捕获@H_404_5@
@H_404_0@ 框架说明 @H_404_0@

6. jsx语法@H_404_5@
@H_404_0@react是基于jsx来写的，对于vue来说，虽然在好多场景下，可以使用template来写，但是vue也完全支持jsx语法的，对于本工具，也只是把react的jsx语法转换成vue支持的jsx
@H_404_0@

两个框架不兼容的地方@H_404_5@
@H_404_0@react在最新版本里面，有flagments的支持，允许根节点返回多个节点，目前没有看到vue支持的，还有就是在设计react组件的时候，使用了高阶，对于本工具，也是不支持的
@H_404_0@

react-to-vue工具@H_404_5@
@H_404_0@安装及使用

@H_404_0@Options:

@H_404_0@# demo
@H_404_0@rtv demo.js
@H_404_0@

转化前后对比@H_404_5@

@H_404_0@

总结@H_404_5@
@H_404_0@以上所述是小编给大家介绍的React 组件转 Vue 组件的命令写法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

猜你在找的Vue相关文章

React 组件转 Vue 组件的命令写法

1. props@H404_5@ <div class="jb51code"> <pre class="brush:js;"> // react FrontendMagazine.propTypes = { name: PropTypes.string } FrontendMagazine.defaultProps = { name: 'FrontendMagazine' } // vue { name: 'frontend-magazine',props: { name: { type: String,default: 'FrontendMagazine' } } }

2. 组件自有状态@H_404_5@ @H_404_0@ 框架 说明 函数来设置值，不同于react的state，vue是响应式 @H_404_0@

3. 生命周期@H_404_5@ @H_404_0@虽然生命周期名不一样，但是差不多有对应的 4. 处理事件@H_404_5@ @H_404_0@ 框架 说明 方法上 // react class FrontendMagazine { clickme () { // xxxx } } // vue { name: 'frontend-magazine',methods: { clickme () { // xxx } } } @H_404_0@

5. 组件错误捕获@H_404_5@ @H_404_0@ 框架 说明 @H_404_0@

6. jsx语法@H_404_5@ @H_404_0@react是基于jsx来写的，对于vue来说，虽然在好多场景下，可以使用template来写，但是vue也完全支持jsx语法的，对于本工具，也只是把react的jsx语法转换成vue支持的jsx @H_404_0@

两个框架不兼容的地方@H_404_5@ @H_404_0@react在最新版本里面，有flagments的支持，允许根节点返回多个节点，目前没有看到vue支持的，还有就是在设计react组件的时候，使用了高阶，对于本工具，也是不支持的 @H_404_0@

react-to-vue工具@H_404_5@ @H_404_0@安装及使用 @H_404_0@Options: @H_404_0@# demo @H_404_0@rtv demo.js @H_404_0@

转化前后对比@H_404_5@ @H_404_0@

总结@H_404_5@ @H_404_0@以上所述是小编给大家介绍的React 组件转 Vue 组件的命令写法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

猜你在找的Vue相关文章

1. props@H404_5@

<div class="jb51code">
<pre class="brush:js;">
// react
FrontendMagazine.propTypes = {
name: PropTypes.string
}
FrontendMagazine.defaultProps = {
name: 'FrontendMagazine'
}
// vue
{
name: 'frontend-magazine',props: {
name: {
type: String,default: 'FrontendMagazine'
}
}
}

2. 组件自有状态@H_404_5@
@H_404_0@ 框架说明函数来设置值，不同于react的state，vue是响应式 @H_404_0@

3. 生命周期@H_404_5@
@H_404_0@虽然生命周期名不一样，但是差不多有对应的

4. 处理事件@H_404_5@
@H_404_0@ 框架说明方法上

// react class FrontendMagazine { clickme () { // xxxx } } // vue { name: 'frontend-magazine',methods: { clickme () { // xxx } } }

@H_404_0@

5. 组件错误捕获@H_404_5@
@H_404_0@ 框架说明 @H_404_0@

6. jsx语法@H_404_5@
@H_404_0@react是基于jsx来写的，对于vue来说，虽然在好多场景下，可以使用template来写，但是vue也完全支持jsx语法的，对于本工具，也只是把react的jsx语法转换成vue支持的jsx
@H_404_0@

两个框架不兼容的地方@H_404_5@
@H_404_0@react在最新版本里面，有flagments的支持，允许根节点返回多个节点，目前没有看到vue支持的，还有就是在设计react组件的时候，使用了高阶，对于本工具，也是不支持的
@H_404_0@

react-to-vue工具@H_404_5@
@H_404_0@安装及使用

@H_404_0@Options:

@H_404_0@# demo
@H_404_0@rtv demo.js
@H_404_0@

转化前后对比@H_404_5@

@H_404_0@

总结@H_404_5@
@H_404_0@以上所述是小编给大家介绍的React 组件转 Vue 组件的命令写法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。