type
status
date
slug
summary
tags
category
icon
password
URL
一、生命周期
Vue
React
大神绘图React 生命周期 点击生命周期即可跳转官网解读
综合对比
生命周期这块基本都是围绕着
挂载、更新、卸载三个方面- Vue 提供的比较多，但是常用的:
created/mounted/destroyed
- React 新版废弃了一些，常用的:
componentDidMount/componentDidUpdate/componentWillUnmount，Hooks更是没有
二、数据流
Vue
双向绑定，单向数据流：vue2.x 通过
v-model实现双向绑定，可以不关心受控组件，v-model 相当于 onChange 的语法糖React
单向数据流：
万物皆 Props，主要通过onChange/setState()的形式该更新数据，需要所以在 react中需要关注受控组件的写法受控组件
三、组件
1、组件封装
Vue
React
2、组件通信
Vue
- props/emit
- provide/inject
- vuex（双向数据绑定，响应式）
- event bus
React
- props(子传父通过
props.function)
- context
- redux（单向数据流）
3、组件嵌套
Vue:slot 插槽
React: props.children
四、总体感受
1、一些区别
- vue
更简单，更方便，熟悉了 api以后，实现简单功能更快。react写法更偏向于原生 JS，Class 的写法不是很舒服，个人更喜欢hooks。
- 熟悉了
hooks以后，写起来很自由，不用关心 vue 中固定的options api
- react做中后台优势更大，有大厂加持，生态更好，组件库功能也更多，解决方案也更多
- vue2.x 对 typescript 不太友好，
react + typescript更加舒适，两者写起来风格差距较大。
- react JSX 写起来还是不够熟练，
onClick、style、className等等，没有v-if，v-for，All in JS。Vue 则推崇html、js、css 分离的写法，当然 vue 也可以写 JSX
- vue 的 prop 必须在
子组件 props 字段里声明。React 的prop 不强制声明，直接使用，如果用 TS 的话还是要声明的
2、学习
- 很多人说 vue 转 react很简单，一周熟练上手。
- 通读一遍 react官网，对着例子多敲敲，好好理解，做做笔记。
- B站 React 技术全家桶学习视频，可以不敲，
快速过一遍，毕竟都不是小白了。然后自己搞个项目，去实现一些自己感兴趣的东西
- 基础知识过完以后，
查缺补漏，找各种博文读一读，不理解的再次进行学习
3、资源推荐
五、参考文章
原po
- 作者:Orcatt
- 链接:https://orcatt.one/article/311ca5fa-c67a-44e2-8418-399b93efd126
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。