React-Diff

建立在以下三个方面的前提成立的React Diff优化策略:

1、跨层级的DOM移动操作较少,可以忽略不计。

2、同一层级的一组子节点可以通过唯一id区分。

3、拥有相同类的两个组件将会生成相似的树结构,拥有不同类的俩个组件则生成不同的树结构。

优化策略分为三部分:

1、Tree Diff 分层求异

只比较同一层级的节点,这样只需要对树进行一次遍历。因此尽量保持稳定的DOM结构,通过隐藏显示的方式,而不是删除和新建节点。

2、Component Diff

如果是同一类型的组件,按照原策略进行Virtual Dom tree Diff,允许用户直接通过shouldComponent来判断是否需要Diff;如果不是同一类型的组件,则直接标记为dirtyComponent,从而替换整个组件下的子节点。

3、Element Diff 设置唯一 key

通过key来判断当前节点是否可复用;尽量减少类似将最后一个节点移动到列表首部的操作

# React

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×