• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue转react入门指南

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

因为新公司使用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内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
前端JavaScript大管家 package.json发布时间:2022-02-05
下一篇:
vue.js实现简易折叠面板发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap