react和vue底层原理

对react的理解

react是集于v（视图层）层的一款框架 虚拟dom 和diff算法
react特点
（1）声明式设计
（2）高效 其中高效以现在 虚拟dom 最大限度减少与dom的交互 和diff算法
（3）灵活 体现在可以与已知的框架或库很好的配合
（4）JSX 是js语法的扩展
（5）组件化 构建组件，是代码的更容易得到复用 ， 比较建议在大型项目的开发
（6）单项数据 ： 实现单项数流 从而减少代码复用

比虚拟dom的比较， 使用diff算法
同级比较 加key
setstate是个异步，  多次合并区别，执行一次渲染

react的diff算法？

1.把树形结构按照层级分解，只比较同级元素。时间复杂度为n
2.给列表结构的每个单元添加唯一的 key 属性，方便比较。
3.React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
4.合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, 
React 检查所有标记 dirty 的 component 重新绘制.
5.选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
 

虚拟dom是什么，为什么虚拟dom会提升代码性能？

	虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，
	利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
	用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，
	插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，
	记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了

Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用
虚拟dom进行diff，算出最小差异，然后再修改真实dom。

当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。
而虚拟DOM是用javascript对象表示的，而操作javascript是很简便高效的。
虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，
最后统一一次更新DOM。因而可以提高性能

虚拟DOM其实就是真实的js对象虚拟DOM提高了react的性能，每次数据更新后都会重新计算上虚拟DOM，并和上一次的虚拟DOM进行对比，对方法变化的部分进行批量更新。react中也提供了shouldComponentUpdate生命周期的回调，来减少数据变化后不必要的虚拟DOM对比过程。保证性能

虚拟DOM的缺点：
1. 代码更多，体积更大
2. 内存占用增大
3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快

React 中 keys 的作用是什么？

render () {
   
  return (
    <ul>
      {
   this.state.todoItems.map(({
   item, key}) => {
   
        return <li key<