vue转react入门指南

编辑: admin 分类: javascript 发布时间: 2021-11-17 来源:互联网
目录
  • 设计
  • 组件通信
  • 生命周期
  • 事件处理
  • class和style
    • class
    • style
  • 条件渲染
    • 列表渲染
      • 组件嵌套
        • 获取DOM
          • 文档结构
            • 路由
              • 动态路由&路由传参
            • 嵌套路由
              • 路由跳转
                • 路由守卫(登录验证,特殊路由处理)
                  • 状态管理
                    • 使用

                  因为新公司使用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 高防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!