react底层原理解析之框架的实现

React的框架实现可以分为俩个部分

一部分叫做reconciliation(调和) ，
另一部分为Rendering(渲染) 。
通过这俩部分，React用当下越来越廉价的计算成本去替代多余并且昂贵的DOM操作来提升整个web app的性能。

Reconciliation(调和)

  我们知道每个React component都有自己的render方法，组件通过每次render方法返回的值（Virtual DOM）去通知React将要渲染的结果，React则会根据将前后两次render返回的值进行比较（diff），找出其中的不同，如果比较的结果有不同点，会将这个结果交给Rendering部分，并且只对比较的不同点进行精准update来达到减少多余DOM操作的目的。
那么新的问题来了，reconciliation是如何找出前后两次render的差别的呢？无非就是遍历两颗Virtual DOM树的节点进行比较了。
然而即使当下硬件性价比已经越来越高，计算的成本已经越来越低，对两颗树进行遍历比较仍然是不可取的（传统 diff 算法的复杂度达到 O(n^3)）。
针对这个问题，React Diff通过下面几个方法，将diff算法的复杂度从O(n^3)降到了O(n)：

1. 只进行同级比较，
2. 不同类的React组件会被当做完全不同的DOM结构而被完全替换
3. key prop：开发人员可以通过给Virtual DOM一个唯一的key属性来暗示React这是同一个DOM结构，反之若key值不同则会被当做完全不同的DOM结构。

Rendering(渲染)

  Reconciliation(调和)结束了之后，将比较的结果交给Rendering部分，从而转换成相对应的DOM操作，更新页面。