今天的考核题目:|今天的考核题目: 你知道React和Vue的区别吗? skr，skr 今天的考核题目:你知道React和

React 和 Vue 的区别博主面了几家公司，看简历上写着使用Vue.js框架，就会问，你能说一说 vue 和 react的区别吗？react 听过，没用过，所以就只能尴尬的说不怎么了解react。这不，最近刚学了react (不断爬坑中)，同时看了些博客文章，当一回搬运工，如有错误，请指出～
简单的自我介绍一下
React是由Facebook创建的JavaScript UI框架，它的诞生改变了JavaScript世界，最大的一个改变就是React推广了Virtual DOM，并且创造了新的语法 - JSX，JSX 允许在JavaScript中写html代码。
Vue是由尤大大开发的一个MVVM框架，它采用的是模板系统而不是JSX。
安利一波
Virtual DOM 一听可能有点懵逼？我也很懵逼。所以我们来看看别人怎么说的：Vue.js(2.0版本)与React的其中最大一个相似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，DOM树的虚拟表现。

Virtual DOM 是一个映射真实DOM的JavaScript对象，如果我们要改变任何元素的状态，那么是先在Virtual DOM 上先进行改变，而不是直接地去修改真实的DOM。比如在Vue中，我们将原来的节点改成这样 : // 原DOM{{ label }} // 修改的DOM{{ label }} {{ username }} 我们往p节点中新增了一个span节点，于是我们一个新的Virtual DOM对象会被创建。然后新的Virtual DOM 和旧的Virtual DOM比较，通过diff算法，算出差异，然后这些差异就会被应用在真实的DOM上

Vue 很“ 嚣张 ”，它宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，由于vue会跟踪每一个组件的依赖收集，通过setter / getter 以及一些函数的劫持，能够精确地知道变化，并在编译过程标记了static静态节点，在接下来新的Virtual DOM 并且和原来旧的 Virtual DOM进行比较时候，跳过static静态节点。所以不需要重新渲染整个组件树。
React默认是通过比较引用的方式进行，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如果想避免不必要的子组件重新渲染，你需要在所有可能的地方使用PureComponent，或者手动实现shouldComponentUpdate方法。但是Vue中，你可以认定它是默认的优化。

今天的考核题目:|今天的考核题目: 你知道React和Vue的区别吗? skr，skr

文章图片
image1 构建工具 React 采用 Create-React-App， Vue 采用的是Vue-Cli，这两个工具非常的好用啊，大兄弟，都能为你创建一个好环境，不过Create-Reacr-App会逼迫你使用webpack和Babel，而Vue-cli可以按需创建不同的模板，使用起来更加灵活一点
数据流很直观的，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能单向传递，React一直提倡的是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。我们只能通过setState来改变状态。
模板渲染方式不同前面说了，Vue和React的模板有所区别，React是通过JSX来渲染模板，而Vue是通过扩展的HTML来进行模板的渲染。React通过原生JS实现模板中的常见语法，比如说条件啊、循环啊、三元运算符啊等，都是通过JS语法实现。而Vue是在和组件代码分离的单独模板中，通过指令v-if、v-for等实现。
这里react比较好点，比如我们要引用一个组件，react直接import 引入，然后可以直接在render中调用了，但是！！vue需要import之后，还要在components里去声明，才能用，好气哦～

文章图片
image3 Vuex 和 Redux 在Vue中，我们是通过Vuex进行状态管理，而在React中，我们是通过Redux进行状态管理。但是这两者在使用上还是有区别的。
在vuex中，我们可以通过在main.js中，引入 store文件夹，并把store挂载到new Vue实例中，这样我们可以直接通过$store灵活使用。

你可以通过dispatch和commit进行更新数据，通过this.$store.state.xx读取数据
或者你可以通过mapState / mapActions 进行vuex的操作

而在React中，我们需要每一个组件都引入connect，目的就是把props和dispatch连接起来。
另外！！！我们vuex可以直接dispatch action也可以commit update，但是redux只能通过dispatch，然后在reducer里，接收到action，通过判断action的type，从而进行对应的操作，redux不能直接调用reducer进行修改！！

Redux使用的是不可变的数据，而Vuex的数据是可变的，Redux每次修改更新数据，其实就是用新的数据替换旧的数据，而Vuex是直接修改原数据Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的，因为在vue实例的时候，进行了依赖收集。

不差上下？反正我觉得他们两个都好，skr，skr，如果你想做一个小型项目就用vue，想做大型项目就用react，我是不知道怎样算小型，怎样算大型，我随心所欲，想用哪个就用哪个，我不会告诉你，我都是做的个人小项目～

文章图片
image4 啊哈？
写文章是真的不方便，还不如直接在github上或者掘金上写的舒服，各位直接去我掘金或者github看吧～
相关链接我的掘金 : https://juejin.im/user/594ca8a35188250d892f4139
我的博客 : https://github.com/PDKSophia/blog.io
言川 - 关于Vue和React区别的一些笔记: https://github.com/lihongxun945/myblog/issues/21
Vue 官网 - 对比其他框架 : https://cn.vuejs.org/v2/guide/comparison.html
【今天的考核题目:|今天的考核题目: 你知道React和Vue的区别吗? skr，skr】众成翻译 - Vue vs React: Javascript 框架之战 : https://www.zcfy.cc/article/vue-vs-react-battle-of-the-javascript-frameworks-3310.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com