React是Facebook开发的一款JS库，因为Facebook认为MVC无法满足他们的扩展需求
特点
1.react不使用模板，新的编程语言
2.react不是一个MVC框架，构造组合式用户界面库，可以重用UI组件
3.响应式，数据更新简单，初始化render方法生成标签字符串，插入页面中，数据变化时，render方法会再次被调用，直接重新以最小的方式改变DOM渲染
4.react是一个轻量级的js库
原理
一、虚拟DOM
操作原生DOM需要重新生成DOM树，非常消耗性能
react中把DOM抽象成JS对象，描述页面中的真实DOM，通过diff算法更改虚拟DOM的JS对象，然后渲染成完整的类DOM树，统一更新到页面中
操作虚拟DOM比操作真实DOM消耗小，提升当前效率
虚拟DOM确保只对界面上真正发生变化的部分进行实际DOM操作
web页面是由DOM树构建的，其中一部分发生改变，就会对整个DOM节点发生变化，而react中构建UI界面的思路是由当前的状态决定的，前后两个状态对应两个界面，由react来比较两个界面的区别，Facebook工程师对web界面做了两个假设，使得diff算法的复杂度降到了最低。
1.不同组件产生出的不同DOM结构
对于同层次的一组节点，可以通过id进行区分，在节点上，进行同一位置前后输出的不同类型节点，react直接删除前面的节点，创建并插入到新节点中，删除的节点就会被彻底销毁，删除节点的子节点也会被完全删除，也不会被用户后面来进行比较，
当react 在同一位置遇到不同组件的时候，也是简单销毁第一个组件，把新的组件添加上去，不同组件会产生不同dom结构，与其浪费在结构的比较，得出的结构是不会等价的，还不如重新创建新的替补上去效率更高
2.两个相同组件产生的类似的DOM结构
逐层次来进行节点比较，在react中，树的算法中，两棵树只会对同层次的节点进行比较，就是把之前的树和修改之后的树进行节点的同层次比较，react会对同一个父节点下的所有子节点来进行相关的比较，发现当前节点已经不在了，就会把当前节点和它的子节点完全删除掉，不会进一步的再比较，这样只要遍历一次树，就可以对整个DOM进行完全的比较。所以react只会对同层次的节点前后进行比较，对于不同层次，只有删除创建，当节点发现子节点a不见了，就会直接消除掉a，当发现子节点b多了一个新的子节点，就会在a里面创建子节点，这样就保证了稳定的结构，对性能有大的提升。
我们也可以CSS显示隐藏操作节点，而不是真正的移除或添加DOM节点。
相同的类型节点算法比较简单，react也会对其重新设置的相关节点进行相关比较，对于不在同一层的节点比较，即使完全相同，也会被销毁，并且react重新创建他们，当他们在同一层级，就要用到diff算法。
二、diff算法
历史轴
2013年开源发布
网友评论