因为新公司使用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'}} />
在react中,可以使用
CSS Modules
达到局部和模块功能,避免组件间css
污染;注意,根据CSS Modules
的官方规范,更推荐以驼峰式的命名方式定义类名,而非kebab-casing
。
<h1 className={styles.appTitle}>
- 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 })