因为新公司使用react技术栈，包括Umi、Dva、Ant-design等一系列解决方案。稍微熟悉一下之后，了解到虽然有些不同，但是还是大相径庭。以下我就以两个火热的框架react16&vue2（在积极学习vue3中）从设计、书写方式、API、生命周期及热门生态做一下简单的对比：
设计
| react | vue | 说明 | |
|---|---|---|---|
| 定位 | 构建用户界面的js库 | 渐进式框架 | react侧重于library，vue侧重于framework |
| 渲染 | setState更新state的值来达到重新render视图 | 响应式数据渲染，修改了响应式数据对应的视图也进行渲染 | react需要考虑何时setState，何时render；vue只需要考虑修改数据 |
| 编写方式 | jsx | template | react是函数式，all in js；vue区分tempalte、script、style，提供语法糖，使用vue-loader编译 |
组件通信
react：严格的单向数据流
- 向下 props
- 向上 props func
- 多级传递 context
遵循万物皆可props，onChange/setState()
vue：单向数据流
- 向下 props down
- 向上 events up（订阅发布）
- 多级传递 $attrs、$listeners
还有各种获取组件实例（VueComponent）,如：$refs、$parent、$children；通过递归获取上级或下级组件，如：findComponentUpward、findComponentsUpward;高阶组件：provide/reject，dispatch/broadcast
| react | vue | 说明 | |
|---|---|---|---|
| 子组件数据传递 | props | props | 都是声明式 |
| 组件状态机 | state | data | 管理组件的状态，react使用setState更改，vue直接赋值，新属性使用$set；vue使用函数闭包特性，保证组件data的独立性，react本就是函数 |
生命周期
| react | vue | 说明 | |
|---|---|---|---|
| 数据的初始化 | constructor | created | |
| 挂载 | componentDidMount | mounted | dom节点已经生成 |
| 更新 | componentDidUpdate | updated | react：组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。 vue：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用 |
| 卸载 | componentWillUnmount | destroyed | 销毁事件 |
事件处理
react
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
- 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault
- 不能卸载非Element标签上，否则会当成props传下去
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
vue
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
//原生事件
<form v-on:submit.prevent="onSubmit"></form>
//自定义事件
<my-component @my-event="handleThis(123, $event)"></my-component>vue事件修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
class和style
class
react
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}vue
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div :class="[{ active: isActive }, errorClass]"></div>style
react
<div style={{color: 'red', fontWeight: 'bold'}} />
vue
<div :style="[baseStyles, overridingStyles]"></div>组件样式的时候你可以在style标签上声明一个scoped来作为组件样式隔离标注,如：<style lang="sass" scoped></style>。最后打包时其实样式都加入一个hash的唯一值,避免组件间css污染
条件渲染
- react：jsx表达式， &&或者三元表达式；return false表示不渲染
- vue：表达式返回true被渲染，可嵌套多个v-else-if，v-else
列表渲染
react：使用.map，一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
vue：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
组件嵌套
react
默认插槽
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>具名插槽
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
<SplitPane left={<Contacts />} right={<Chat />} />
vue
默认插槽
<main>
<slot></slot>
</main>具名插槽
<header>
<slot name="header"></slot>
</header>获取DOM
react:管理焦点，文本选择或媒体播放。触发强制动画。集成第三方 DOM 库
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}vue：被用来给元素或子组件注册引用信息
<div ref="div">hello</div>
this.$refs.p.offsetHeight
文档结构
Umi
├── config # umi 配置，包含路由，构建等配置
│ ├── config.ts # 项目配置.umirc.ts优先级更高，使用此方式需要删除.umirc.ts
│ ├── routes.ts # 路由配置
│ ├── defaultSettings.ts # 系统配置
│ └── proxy.ts # 代理配置
├── mock # 此目录下所有 js 和 ts 文件会被解析为 mock 文件
├── public # 此目录下所有文件会被copy 到输出路径，配置了hash也不会加
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 约定式路由时的全局布局文件
│ ├── models # 全局 dva model
│ ├── pages # 所有路由组件存放在这里
│ │ └── document.ejs # 约定如果这个文件存在，会作为默认模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ ├── global.ts # 全局 JS
│ └── app.ts # 运行时配置文件,比如修改路由、修改 render 方法等
├── README.md
└── package.json
vue_cli
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ └── main.js # 入口文件 加载组件 初始化等
├── tests # 测试
├── vue.config.js # vue-cli 配置如代理，压缩图片
└── package.json # package.json
路由
动态路由&路由传参
react-router
- history.push(/list?id=${id})
- history.push({pathname: '/list', query: {id}})
- history.push(/list/id=${id})
- history.push({pathname: '/list', params: {id}})
获取 props.match.query / props.match.params
vue-router
- this.$router.push({path: '/list', query: {id}})
- this.$router.push({path: '/list', params: {id}})
获取 this.$router.query / this.$router.params
嵌套路由
-react
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/list', component: 'list' },
{ path: '/admin', component: 'admin' },
],
}
<div style={{ padding: 20 }}>{ props.children }</div>使用props.children渲染子路由
vue-router
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
<div id="app">
<router-view></router-view>
</div>使用vue原生组件/<router-view/>组件渲染子路由
路由跳转
umi
<NavLink exact to="/profile" activeClassName="selected">Profile</NavLink>
history.push(`/list?id=${id}`)vue
<router-link to="/about">About</router-link>
this.$router.push({path: '/list', query: {id}})路由守卫(登录验证，特殊路由处理)
- Umi
- vue-router
全局路由守卫
全局前置守卫：router.beforeEach
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
全局后置守卫：router.beforeEach
router.afterEach((to, from) => {
// ...
})
状态管理
多个视图依赖于同一状态或来自不同视图的行为需要变更同一状态;才需要使用状态管理机。
| dva | vuex | 说明 | |
|---|---|---|---|
| 模块 | namespace | modules | 解决应用的所有状态会集中到一个比较大的对象，store对象可能变得相当臃肿 |
| 单一状态树 | state | state | 唯一数据源 |
| 提交状态机 | reducer | mutations | 用于处理同步操作，唯一可以修改 state 的地方 |
| 处理异步操作 | effects | action | 调用提交状态机更改状态树 |
使用
dva: model connect UI
// new model:models/products.js
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};
//connect model
export default connect(({ products }) => ({
products,
}))(Products);
//dispatch model reduce
dispatch model reduce({
type: 'products/delete',
payload: id,
})
如有异步操作，如ajax请求，dispath model effects，然后effects调用model reduce
vuex
// new module
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
//bind UI
<input v-model="$store.state[modelesName].name"/>
//commit module mutation
store.commit('increment')如有异步操作，如ajax请求，dispath module actions，然后actions调用module mutations
store.dispatch({
type: 'incrementAsync',
amount: 10
})
到此这篇关于vue转react入门指南的文章就介绍到这了,更多相关vue转react内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
