vue转react入门知识点有哪些

这篇文章主要讲解了“vue转react入门知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue转react入门知识点有哪些”吧！

因为新公司使用react技术栈，包括Umi、Dva、Ant-design等一系列解决方案。稍微熟悉一下之后，了解到虽然有些不同，但是还是大相径庭。以下我就以两个火热的框架react16&vue2（在积极学习vue3中）从设计、书写方式、API、生命周期及热门生态做一下简单的对比：

设计

组件通信

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

• 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 :></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也不会加├── class="lazy" data-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模板├── class="lazy" data-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: model connect UI

// new model:models/products.jsexport default {  namespace: 'products',  state: [],  reducers: {    'delete'(state, { payload: id }) {      return state.filter(item => item.id !== id);    },  },};//connect modelexport default connect(({ products }) => ({  products,}))(Products);//dispatch model reducedispatch model reduce({  type: 'products/delete',  payload: id,})

如有异步操作，如ajax请求，dispath model effects，然后effects调用model reduce
vuex

// new moduleconst 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入门知识点有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！