React 虚拟DOM+components+生命周期的联系

React 虚拟DOM+components+生命周期的联系

React-虚拟DOM分析

从浏览器渲染角度说React为什么会使用虚拟DOM

虚拟DOM的原理

以下是综各个资料后的个人理解，如有问题请指出

从浏览器渲染角度说React

首先要知道React是由Facebook对现有业务进行改进提升的时候提出来的。DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。所有Facebook在React中引入了页面UI组件化、虚拟DOM，来解决这些问题。
React.js对常用组建进行了优化,它算是一个components组件库。ReactDom.js是React版本优化的虚拟DOM
如果要渲染到最后Display显示，需要经过很长过程，浏览器会先收集到HTML和CSS，对HTML和CSS分别经过Parser剖析器，分别生成DOMTree和CSSRuleTree。 DOM和CSSOM合并后生成Render Tree。
React.js希望用JSX语言写出HTML和CSS还有页面逻辑混合在一起成为一个component，（在react编写的时候就是通过class继承的react.component这个类），直接通过JS对象的形式生成了ReactRenderTree。
我觉得这是原型链的🌲树状结构化，ReactRenderTree（React生命周期）在通过虚拟DOM（ReactDom.js），首次生成给到浏览器的时候就是一个浏览器直接可以识别的RenderTree，浏览器直接Painting，然后显示在页面上。
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作
当需要重排时Reflow

React会通过虚拟DOM对新生成的DOM和原来的DOM树进行对比，改变页面
虚拟DOM的原理

虚拟DOM类似于（自动化控制的网页生成器）通过Node节点render生成相对应的网页，但主要功能在于网页更新时候，对于Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。
由于计算两棵树的常规算法是O(n^3)级别，DOM结构达到成百个节点在实际项目中很正常，所以需要优化深度遍历的算法。
React diff 策略

Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。

拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。

对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。

React的局限性，不适合每个页面使用率很低网站，（每个页面页面逻辑不同）;

知乎-React 源码剖析系列 － 不可思议的 react diff
地址：https://zhuanlan.zhihu.com/p/20346379