前言

面试竞争力越来越大，是时候撸一波Vue和React源码啦；

本文从20个层面来对比Vue和React的源码区别；

如果需要了解API的区别，请戳：

Vue 开发必须知道的 36 个技巧

React 开发必须知道的 34 个技巧

文章源码：请戳，原创码字不易，欢迎star！

1.Vue和React源码区别

1.1 Vue源码

来张Vue源码编译过程图 图片来源：分析Vue源码实现

1.1.1 挂载

初始化$mounted会挂载组件,不存在 render 函数时需要编译(compile);

1.1.2 compile

1.compile 分为 parse，optimize 和 generate，最终得到 render 函数；

2.parse 调用 parseHtml 方法，方法核心是利用正则解析 template 的指令，class 和 stype，得到 AST；

3.optimize 作用标记 static 静态节点，后面 patch,diff会跳过静态节点；

4.generate 是将 AST 转化为 render 函数表达式，执行 vm._render 方法将 render 表达式转化为VNode，得到 render 和 staticRenderFns 字符串；

5.vm._render 方法调用了 VNode 创建的方法createElement

1.1.3 依赖收集与监听

这部分是数据响应式系统

1.调用 observer()，作用是遍历对象属性进行双向绑定；

2.在 observer 过程中会注册Object.defineProperty的 get 方法进行依赖收集，依赖收集是将Watcher 对象的实例放入 Dep 中；

3.Object.defineProperty的 set 会调用Dep 对象的 notify 方法通知它内部所有的 Watcher 对象调用对应的 update()进行视图更新；

4.本质是发布者订阅模式的应用

1.1.4 diff 和 patch

diff 算法对比差异和调用 update更新视图：

1.patch 的 differ 是将同层的树节点进行比较,通过唯一的 key 进行区分，时间复杂度只有 O(n)；

2.上面将到 set 被触发会调用 watcher 的 update()修改视图；

3.update 方法里面调用 patch()得到同级的 VNode 变化;

4.update 方法里面调用createElm通过虚拟节点创建真实的 DOM 并插入到它的父节点中；

5.createElm实质是遍历虚拟 dom，逆向解析成真实 dom；

1.2 React 源码

来张React源码编译过程图

图片来源：React源码解析

1.2.1 React.Component

1.原型上挂载了setState和forceUpdate方法;

2.提供props,context,refs 等属性;

3.组件定义通过 extends 关键字继承 Component;

1.2.2 挂载

1.render 方法调用了React.createElement方法(实际是ReactElement方法)；

2.ReactDOM.render(component，mountNode)的形式对自定义组件/原生DOM/字符串进行挂载；

3.调用了内部的ReactMount.render，进而执行ReactMount._renderSubtreeIntoContainer,就是将子DOM插入容器；

4.ReactDOM.render()根据传入不同参数会创建四大类组件，返回一个 VNode；

5.四大类组件封装的过程中，调用了mountComponet方法，触发生命周期，解析出 HTML；

1.2.3 组件类型和生命周期

1.ReactEmptyComponent,ReactTextComponent,ReactDOMComponent组件没有触发生命周期;

2.ReactCompositeComponent类型调用mountComponent方法,会触发生命周期,处理 state 执行componentWillMount钩子,执行 render,获得 html,执行componentDidMounted

1.2.4 data 更新 setState

细节请见 3.1

1.2.5 数据绑定

1.setState 更新 data 后,shouldComponentUpdate为 true会生成 VNode,为 false 会结束;

2.VNode会调用 DOM diff,为 true 更新组件;

1.3 对比

React:

1.单向数据流;

2.setSate 更新data 值后，组件自己处理;

3.differ 是首位是除删除外是固定不动的,然后依次遍历对比;

Vue:

1.v-model 可以实现双向数据流,但只是v-bind:value 和 v-on:input的语法糖;

2.通过 this 改变值，会触发 Object.defineProperty的 set，将依赖放入队列，下一个事件循环开始时执行更新时才会进行必要的DOM更新，是外部监听处理更新；

3.differcompile 阶段的optimize标记了static 点，可以减少 differ 次数，而且是采用双向遍历方法；

2.React 和 Vue 渲染过程区别

2.1 React

1.生成期(挂载):参照 1.2.1

2.更新: 参照1.1.3和 1.1.4

3.卸载:销毁挂载的组件

2.2 Vue

1.new Vue()初始化后initLifecycle(vm),initEvents(vm),initRender(vm),callHook(vm,beforeCreate),initState(vm),callHook(vm,created);

2.compileToFunction:就是将 template 编译成 render 函数;

3.watcher: 就是执行1.2.3;

4.patch:就是执行 1.2.4

3.AST 和 VNode 的异同

1.都是 JSON 对象；

2.AST 是HTML,JS,Java或其他语言的语法的映射对象，VNode 只是 DOM 的映射对象，AST 范围更广；

3.AST的每层的element，包含自身节点的信息(tag,attr等)，同时parent，children分别指向其父element和子element，层层嵌套，形成一棵树

4.vnode就是一系列关键属性如标签名、数据、子节点的集合，可以认为是简化了的dom:

5.VNode 的基本分类:EmptyVNode,TextVNode,ComponentVNNode,ElementVNNode,CloneVNode

6.创建 VNode

4.React 和Vue 的 differ 算法区

4.1 React

1.Virtual DOM 中的首个节点不执行移动操作（除非它要被移除），以该节点为原点，其它节点都去寻找自己的新位置; 一句话就是首位是老大,不移动;

2.在 Virtual DOM 的顺序中，每一个节点与前一个节点的先后顺序与在 Real DOM 中的顺序进行比较，如果顺序相同，则不必移动，否则就移动到前一个节点的前面或后面;

3.tree diff:只会同级比较,如果是跨级的移动,会先删除节点 A,再创建对应的 A;将 O(n3) 复杂度的问题转换成 O(n) 复杂度;

4.component diff:

根据batchingStrategy.isBatchingUpdates值是否为 true;

如果true 同一类型组件,按照 tree differ 对比;

如果 false将组件放入 dirtyComponent,下面子节点全部替换,具体逻辑看 3.1 setSate

5.element differ:

tree differ 下面有三种节点操作:INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）

请戳

6.代码实现

4.2 Vue

1.自主研发了一套Virtual DOM，是借鉴开源库snabbdom，

snabbdom地址

2.也是同级比较，因为在 compile 阶段的optimize标记了static 点，可以减少 differ 次数；

3.Vue 的这个 DOM Diff 过程就是一个查找排序的过程，遍历 Virtual DOM 的节点，在 Real DOM 中找到对应的节点，并移动到新的位置上。不过这套算法使用了双向遍历的方式，加速了遍历的速度，更多请戳；

4.代码实现:

4.3 对比

相同点:

都是同层 differ,复杂度都为 O(n);

不同点:

1.React 首位是除删除外是固定不动的,然后依次遍历对比;

2.Vue 的compile 阶段的optimize标记了static 点,可以减少 differ 次数,而且是采用双向遍历方法;

5.React 的 setState和 Vue 改变值的区别

5.1 setState

1.setState 通过一个队列机制来实现 state 更新，当执行 setState() 时，会将需要更新的 state 浅合并后,根据变量 isBatchingUpdates(默认为 false)判断是直接更新还是放入状态队列；

2.通过js的事件绑定程序 addEventListener 和使用setTimeout/setInterval 等 React 无法掌控的 API情况下isBatchingUpdates 为 false，同步更新。除了这几种情况外batchedUpdates函数将isBatchingUpdates修改为 true；

3.放入队列的不会立即更新 state，队列机制可以高效的批量更新 state。而如果不通过setState，直接修改this.state 的值，则不会放入状态队列;

4.setState 依次直接设置 state 值会被合并，但是传入 function 不会被合并；

让setState接受一个函数的API的设计是相当棒的！不仅符合函数式编程的思想，让开发者写出没有副作用的函数，而且我们并不去修改组件状态，只是把要改变的状态和结果返回给React，维护状态的活完全交给React去做。正是把流程的控制权交给了React，所以React才能协调多个setState调用的关系

5.更新后执行四个钩子:shouleComponentUpdate,componentWillUpdate,render,componentDidUpdate

5.2 Vue 的 this 改变

1.vue 自身维护 一个 更新队列，当你设置 this.a = 'new value'，DOM 并不会马上更新；

2.在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更；

3.如果同一个 watcher 被多次触发，只会被推入到队列中一次；

4.也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新和去重；

5.所以 for 循环 10000次 this.a = i vue只会更新一次，而不会更新10000次;

6.data 变化后如果 computed 或 watch 监听则会执行;

6. Vue的v-for 或 React 的map 中为什么不要用 index作为 key

6.1 为什么要加 key

6.1.1 React

1.上面的 5.1 讲到 React 的 differ 中 element differ 有三种节点操作；

2.场景一不加 key:

新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D；

都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可；

3.场景二加 key:

新建：从新集合中取得 E，判断老集合中不存在相同节点 E，则创建新节点 ElastIndex不做处理E的位置更新为新集合中的位置，nextIndex++；

删除：当完成新集合中所有节点 diff 时，最后还需要对老集合进行循环遍历，判断是否存在新集合中没有但老集合中仍存在的节点，发现存在这样的节点 D，因此删除节点 D；

4.总结:

显然加了 key 后操作步骤要少很多,性能更好；

但是都会存在一个问题，上面场景二只需要移动首位，位置就可对应，但是由于首位是老大不能动，所以应该尽量减少将最后一个节点移动到首位，更多请戳。

6.1.2 Vue

Vue 不加 key 场景分析:

1.场景一不加 key:

也会将使用了双向遍历的方式查找,发现 A,B,C,D都不等,先删除再创建；

2.场景二加 key:双向遍历的方式查找只需要创建E，删除D，改变 B、C、A的位置

6.2 为什么 key 不能为 index

这个问题分为两个方面:

1.如果列表是纯静态展示，不会 CRUD，这样用 index 作为 key 没得啥问题；

2.如果不是

3.所以 list 最好不要用 index 作为 key

7. Redux和 Vuex 设计思想

7.1 Redux

API:

1.Redux则是一个纯粹的状态管理系统，React利用React-Redux将它与React框架结合起来；

2.只有一个用createStore方法创建一个 store；

3.action接收 view 发出的通知，告诉 Store State 要改变，有一个 type 属性；

4.reducer:纯函数来处理事件，纯函数指一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用,得到一个新的 state；

源码组成:

7.2 Vuex

1.Vuex是吸收了Redux的经验，放弃了一些特性并做了一些优化，代价就是VUEX只能和VUE配合；

2.store:通过 new Vuex.store创建 store，辅助函数mapState；

3.getters:获取state，有辅助函数 mapGetters；

4.action:异步改变 state，像ajax，辅助函数mapActions；

5.mutation:同步改变 state,辅助函数mapMutations；

7.3 对比

1.Redux：view——>actions——>reducer——>state变化——>view变化（同步异步一样）

2.Vuex：view——>commit——>mutations——>state变化——>view变化（同步操作）

view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）

8.redux 为什么要把 reducer 设计成纯函数

1.纯函数概念:一个函数的返回结果只依赖于它的参数(外面的变量不会改变自己)，并且在执行过程里面没有副作用(自己不会改变外面的变量)；

2.主要就是为了减小副作用，避免影响 state 值，造成错误的渲染；

3.把reducer设计成纯函数，便于调试追踪改变记录；

9.Vuex的mutation和Redux的reducer中为什么不能做异步操作

1.在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation 就行；

2.vuex 真正限制你的只有 mutation 必须是同步的这一点（在 redux 里面就好像 reducer 必须同步返回下一个状态一样）；

3.每一个 mutation 执行完成后都可以对应到一个新的状态（和 reducer 一样），这样 devtools 就可以打个 snapshot 存下来，然后就可以随便 time-travel 了。如果你开着 devtool 调用一个异步的 action，你可以清楚地看到它所调用的 mutation 是何时被记录下来的，并且可以立刻查看它们对应的状态；

4.其实就是框架是这么设计的,便于调试追踪改变记录

10.双向绑定和 vuex 是否冲突

1.在严格模式中使用Vuex，当用户输入时，v-model会试图直接修改属性值，但这个修改不是在mutation中修改的，所以会抛出一个错误；

2.当需要在组件中使用vuex中的state时，有2种解决方案：

11. Vue的nextTick原理

11.1 使用场景

什么时候会用到?

nextTick的使用原则主要就是解决单一事件更新数据后立即操作dom的场景。

11.2 原理

1.vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行；

2.microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕；

3.考虑兼容问题，vue 做了 microtask 向 macrotask 的降级方案；

4.代码实现:

13. Vue 的data 必须是函数而 React 的 state 是对象

13.1 Vue 的 data 必须是函数

对象是引用类型，内存是存贮引用地址，那么子组件中的 data 属性值会互相污染，产生副作用；

如果是函数，函数的{}构成作用域，每个实例相互独立，不会相互影响；

13.2 React 的 state 是对象

因为 state 是定义在函数里面,作用域已经独立

14.Vue 的合并策略

1.生命周期钩子:合并为数组

2.watch：合并为数组，执行有先后顺序；

3.assets（components、filters、directives）：合并为原型链式结构,合并的策略就是返回一个合并后的新对象，新对象的自有属性全部来自 childVal， 但是通过原型链委托在了 parentVal 上

4.data为function，需要合并执行后的结果，就是执行 parentVal 和 childVal 的函数，然后再合并函数返回的对象；

5.自定义合并策略：

14.Vue-router 的路由模式

1.三种："hash" | "history" | "abstract"；

2.hash(默认),history 是浏览器环境，abstract是 node 环境；

3.hash: 使用 URL hash 值来作路由，是利用哈希值实现push、replace、go 等方法；

4.history:依赖 HTML5 History API新增的 pushState() 和 replaceState()，需要服务器配置；

5.abstract:如果发现没有浏览器的 API，路由会自动强制进入这个模式。

15.Vue 的事件机制

16.keep-alive 的实现原理和缓存策略

1.获取keep-alive第一个子组件；

2.根据include exclude名单进行匹配，决定是否缓存。如果不匹配，直接返回组件实例，如果匹配，到第3步；

3.根据组件id和tag生成缓存组件的key，再去判断cache中是否存在这个key，即是否命中缓存，如果命中，用缓存中的实例替代vnode实例，然后更新key在keys中的位置，(LRU置换策略)。如果没有命中，就缓存下来，如果超出缓存最大数量max,删除cache中的第一项。

4.keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；

5.LRU算法:根据数据的历史访问记录来进行淘汰数据，其实就是访问过的，以后访问概率会高；

6.LRU 实现:

新数据插入到链表头部；

每当缓存命中（即缓存数据被访问），则将数据移到链表头部；

当链表满的时候，将链表尾部的数据丢弃。

17.Vue 的 set 原理

1.由于 Object.observe()方法废弃了，所以Vue 无法检测到对象属性的添加或删除；

2.原理实现:

判断是否是数组，是利用 splice 处理值；

判断是否是对象的属性，直接赋值；

不是数组，且不是对象属性，创建一个新属性，不是响应数据直接赋值，是响应数据调用defineReactive；

19 react-redux是如何来实现的

源码组成:

1.connect 将store和dispatch分别映射成props属性对象，返回组件

2.context 上下文 导出Provider,,和 consumer

3.Provider 一个接受store的组件，通过context api传递给所有子组件

20. react16 的 fiber 理解

1.react 可以分为 differ 阶段和 commit(操作 dom)阶段；

2.v16 之前是向下递归算法，会阻塞；

3.v16 引入了代号为 fiber 的异步渲染架构；

4.fiber 核心实现了一个基于优先级和requestIdleCallback循环任务调度算法；

5.算法可以把任务拆分成小任务，可以随时终止和恢复任务，可以根据优先级不同控制执行顺序，更多请戳；

本文转载于 SegmentFault 社区

作者：火狼