React数据视图更新原理

本文章来自于俺学习React课程的笔记，大致分为8个阶段，React底层使用该方式避免操作DOM，节约性能。

1. state数据
2. JSX模板
3. 数据+模板生成虚拟DOM （本质上虚拟DOM就是一个JS对象，用它来描述一个对象，虽然损耗了性能，但是js生成一个对象相对比直接操作DOM微乎其微）
4. 用虚拟DOM的结构生成真正的HTML DOM，在页面上显示
5. state如果发生变化
6. 生成新的虚拟DOM
7. 将原始的虚拟DOM和新的虚拟DOM进行比较（Diff算法，找到改变的差异，只修改改变的部分）极大的提升了性能
8. 直接操作DOM，改变虚拟DOM中差异的HTML DOM部分。

俺对React底层的理解就是将DOM 操作的影响的性能，转移到js，借助于js 创建一个对象的低损耗，来提高系统整体的性能。

优点主要有以下：

• 性能提升了
• 它使得跨端应用得以实现。 React Native