react的核心是虚拟dom和diff算法 ## 虚拟DOM（Virtual DOM） React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比（diff算法），得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。 而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并， ## diff算法 diff算法可以将树的比对复杂度从O（n^3）降低到O(n)，从而大大提高性能 ## diff策略 1. Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。 2. 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。 3. 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。 基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化， ### tree diff 对树进行分层比较，两棵树只会对同一层次的节点进行比较 ### component diff 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。 ### element diff 当节点处于同一层级时，React diff 提供了三种节点操作，分别为：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）。 ***** ##### 参考 [参考](https://zhuanlan.zhihu.com/p/20346379)