React 虚拟 DOM 和 Diff 算法

虚拟 DOM 和 Diff 算法

• React 更新视图的思想是：只要 state 变化就重新渲染视图
• 特点：思路非常清晰
• 问题：组件中只有一个 DOM 元素需要更新时，也得把整个组件的内容重新渲染到页面中？ nononono
• 理想状态：部分更新，只更新变化的地方。
• 问题：React 是如何做到部分更新的？虚拟 DOM 配合 Diff 算法
• 虚拟DOM：本质上就是一个 JS 对象，用来描述你希望在屏幕上看到的内容（UI）。
• 

1. 执行过程

1. 初次渲染时，React 会根据初始 state (Model)，创建一个虚拟 DOM 对象（树）。
2. 根据虚拟 DOM 生成真正的 DOM,渲染到页面中。
3. 当数据变化后（setState（）），重新根据新的数据，创建新的虚拟 DOM 对象（树）。
4. 与上一次得到的虚拟 DOM 对象，使用 Diff 算法 对比（找不同）