共计 626 个字符，预计需要花费 2 分钟才能阅读完成。
React 的渲染原理能够用 Virtual DOM 和 Reconciliation 两个概念来解释：
1. Virtual DOM
Virtual DOM 是 React 用来形容实在 DOM 树的一个 JS 对象树，其构造和实在的 DOM 树是一一对应的，通过 Virtual DOM 能够不便地操作和治理 DOM 树，进步了组件的渲染效率。
它的基本原理是在组件状态（state）发生变化时，React 不间接操作实在的 DOM 树，而是先在内存中创立一个新的 Virtual DOM 树，而后通过比拟新旧 Virtual DOM 树的差别，只对更新的局部进行对应的 DOM 操作，这种更新形式也叫做 Diff 算法，是 React 在渲染过程中的外围算法。
2. Reconciliation
当组件状态发生变化时，React 须要调用 Reconciliation 算法，来决定哪些 DOM 节点须要更新以及如何更新。它的根本流程是：
- 比拟新旧 Virtual DOM 的根节点，判断是否能够复用
- 如果根节点不能复用，则判断它们是否是不同类型的节点
- 如果是不同类型节点，则间接替换
- 如果是雷同类型节点，则依据节点的属性和子节点的内容进行复用或更新
在比拟新旧 Virtual DOM 时，React 采纳了一种递归遍历的形式，这也是为什么更新操作不适宜过于频繁的起因，因为递归遍历是一个高耗费的操作。
总的来说，React 的渲染原理利用了 Virtual DOM 和 Reconciliation 两个外围概念，进步了组件的渲染效率，同时也能保障 DOM 操作的可靠性和稳定性。
正文完
