React 原理

什么是React

react是用于构建用户界面的JS框架。因此react只负责解决view层的渲染。

react做了什么？

• Virtual Dom模型
• 生命周期管理
• setState机制
• diff算法
• React patch、事件系统
• react的 Virtual Dom模型

Virtual DOM

virtual dom 实际上是对实际Dom的一个抽象，是一个js对象。react所有的表层操作实际上是在操作virtual dom。 经过diff算法会计算出virtual dom的差异，然后将这些差异进行实际的dom操作更新页面。

Diff算法

React基于两个假设：

• 两个相同的组件产生类似的DOM结构，不同组件产生不同DOM结构
• 对于同一层次的一组子节点，它们可以通过唯一的id区分

diff算法用于计算出两个virtual dom的差异，是react中开销最大的地方。传统diff算法通过循环递归对比差异，算法复杂度为O(n3)。

具体看下Diff算法是怎么做的

• 节点类型不同
• 节点类型相同
• 子节点比较

节点类型不同 直接删去旧的节点，新建一个新的节点

节点类型相同

• DOM元素类型: 对比属性，只改变需要改变的属性
• 自定义组件类型: 根据新节点的props去更新原来根节点的组件实例，触发一个更新过程，最后在对所有的child节点在进行diff的递归比较更新

子节点比较 使用Key