20170814-React

React

在Web开发中，要将更新的数据实时反映到UI上，就不可避免地须要对DOM进行操做，而复杂频繁的DOM操做一般是产生性能瓶颈的缘由之一。为此，React引入了Virtual DOM机制。Virtual DOM其实是在浏览器端用JavaScript实现的一套DOM API，它包括：

• Virtual DOM模型
• 生命周期的维护和管理
• 性能高效的diff算法
• 将Virtual DOM展现为原生DOM的Patch方法

基于React进行开发时，全部的DOM树都是在Virtual DOM的基础上构造的。React在Virtual DOM上实现了DOM diff算法，当数据更新时，会经过diff算法寻找到须要变动的DOM节点，并只对变化的部分进行实际的浏览器的DOM更新，而不是从新渲染整个DOM树。

Virtual DOM模型

ReactNode

• ReactElement

  • ReactComponentElement
  • ReactDOMElement
• ReactFragment
• ReactText

建立React元素

经过JSX建立的虚拟元素最终会被编译成调用React的createElement方法

初始化组件入口

当使用React建立组件时，首先会调用instantiateReactComponent，这是初始化组件的入口函数，它经过判断node类型来区分不一样组件的入口

文本组件

ReactDOMTextComponent

标签组件

ReactDOMComponent

自定义组件

ReactCompositeComponent

生命周期

React的主要思想是经过构建可复用组件来构建用户界面。所谓组件，就是有限状态机，经过状态渲染对应页面，每一个组件组件都有本身的生命周期，它规定了组件和方法须要在哪一个阶段改变和执行。

diff算法

diff算法会帮助咱们计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操做，而非从新渲染整个页面，从而保证了每次操做更新后页面的高效渲染。

传统diff算法

• 计算一颗树形结构转换成另外一棵树形结构的最少操做
• 传统算法经过循环递归对节点进行一次对比，算法复杂度达到O(n³)

React对diff算法的改进

React结合DOM树的特色，对传统diff算法进行了改进，将其转换为O(n)复杂度的问题

React diff算法的三个策略

• Web UI中DOM节点跨层级的操做较少（若是有，能够理解为删去一个节点，在另外一层级插入新节点）
• 拥有相同类的两个组件会生成类似的树形结构，拥有不一样类的两个组件将会生成不一样的树形结构
• 对于同一层级的一组子节点，它们能够经过惟一的id进行区分

tree diff(上面的第一个策略)

• 对树进行分层比较，两颗树只会对同一层次的节点进行比较
• React只会简单地考虑同层级节点的位置变换，而对于不一样层级的节点，只有建立和删除操做
• 在开发组件时，保持稳定的DOM结构有助于性能的提高，建议不要进行DOM节点跨层级的操做

component diff(第二个策略)

• 若是是同一类型的组件，则按照原策略继续比较Virtual DOM
• 若是不是同一类型的组件，则将旧组件直接删除，在该位置从新建立新组件
• 若是是同一类型的组件，有可能其Virtual DOM没有任何变化，若是咱们可以明确知道这点，这能够利用shouldComponentUpdate()来判断组件是否须要进行diff算法分析

element diff(第三个策略)

• 当节点处于同一层级时，diff算法提供了3中节点操做，分别为插入、移动、删除
• 对于同一层级的同组子节点，须要添加惟一key进行区分，经过这种方法来解决相同节点位置变化的状况

React Patch方法

将diff算法计算出来的DOM差别队列更新到真实的DOM节点上，最终让浏览器可以渲染出更新的数据。

（未完待续...）

参考

深刻浅出React