1-1.介绍
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库，前端三大框架【1】之一
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
- 前端三大框架：Angular、React、Vue,目前React最火, Vue和Angular不相上下,但发展趋势vue更大,
在大型超大型web应用开发上，看好Angular, 小型应用上，看好vue,个性化需求、中型应用，更倾向react
1-2.为什么要用框架
- 原生js操作DOM繁琐，效率低
- 使用js操作DOM，浏览器会进行大量的重绘重排
- js没有组件化编码方案，代码复用率低
1-3.React特点
- 声明式编码，通过一些行为替代，例如语法糖
- 组件化编码，提高开发效率及组件复用率，js是命令式编码，通过获取->操作等步骤
- React Native 编写原生应用
- 高效（优秀的Diffing算法），通过虚拟DOM和优秀的diff算法，尽量减少与真实DOM的交互
1-4.虚拟dom和diff算法
在vue,react等框架中,都是使用虚拟DOM来提高效率的,那么来说说什么是虚拟DOM?为什么要用?还有它是怎么工作的?
1-4-2.DOM树
网页呈现的过程:
- 浏览器请求服务器获取页面HTML代码
- 浏览器要先在内存中解析DOM结构,并在浏览器内存中渲染出一个DOM树
- 浏览器把DOM树呈现在页面上
1-4-3.为什么原生JS会浪费性能?
举个例子:
我要更新10个DOM节点,浏览器会一个一个的进行更新,但它更新第一个的时候并不知道后面还有9个,所以会一个一个执行,共执行10次。每一次的更新都要去计算，但更新后DOM树变化了，更新第二个的时候，前一次计算的就没法再利用了，还需要再计算。白白浪费性能。
1-4-4.什么是虚拟DOM？
框架中的概念，用JS对象来模拟页面上DOM和DOM之间的嵌套，本质是一个对象，而且把原生对象中的属性根据需要添加，不是全部存在，更‘轻’。
1-4-5.工作原理
获取内存中的(虚拟)dom树和新生成的(虚拟)dom树,通过diff算法进行对比,得到需要更新的DOM元素
这两颗(虚拟)DOM树都是框架模拟出来的,就是个对象,旧的会被保存在内存中
1-4-6.为什么虚拟DOM性能更优秀？
还是要更新10个DOM节点，虚拟DOM不会一次一次的去通知浏览器，而是通过diff算法去操作框架造出来的虚拟DOM树(也就是个对象)，更新对象速度会很快，然后将修改后的虚拟DOM树一次性的让浏览器进行挂载更新，减少计算的浪费。
这么一比较，浏览器只是运作了一次，达到高效的更新渲染
1-4-7.什么是diff算法？
分成三部分tree diff、 component diff、 element diff,分别去对比新旧(虚拟)dom树,DOM树中的组件,组件中的元素
tree diff
新旧两个DOM树，逐层对比的过程，就是tree diff
当整个DOM树逐层对比完毕，则能找到要被更新的元素
component diff
在进行tree diff的时候,会对每一层的组件进行对比,如果新旧组件的类型相同,会进行element diff对比,如果不同,直接移除组件更新新组件
element diff
在进行component diff对比时如果两个组件的类型相同,会对其内部的元素进行对比
1-4-8.总结
在对比整个DOM树时,先对比页面中的DOM树内容是否有变化,然后对比组件是否一致,不一致的替换,一致的对比组件累的元素是否一致。有次，可以不漏下每一个元素，完成更新
