vue转react入门指南
目录
- 设计
- 组件通信
- 生命周期
- 事件处理
- class和style
- class
- style
- 条件渲染
- 列表渲染
- 组件嵌套
- 获取DOM
- 文档结构
- 路由
- 动态路由&路由传参
- 嵌套路由
- 路由跳转
- 路由守卫(登录验证,特殊路由处理)
- 状态管理
- 使用
因为新公司使用react技术栈,包括Umi、Dva、Ant-design等一系列解决方案。稍微熟悉一下之后,了解到虽然有些不同,但是还是大相径庭。以下我就以两个火热的框架react16&vue2(在积极学习vue3中)从设计、书写方式、API、生命周期及热门生态做一下简单的对比:
设计
react
vue
说明
组件通信
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
说明
生命周期
react
vue
说明
事件处理
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
说明
使用
dva: model connect 高防cdnhttp://www.558idc.com/gfcdn.htmlUI
// 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内容请搜索hwidc以前的文章或继续浏览下面的相关文章希望大家以后多多支持hwidc!