网上搜到的资料里,讲diff的把虚拟DOM一带而过,讲虚拟DOM的就把diff一带而过,而且没法直观的感受diff的效果,于是...
我搜集了一些资料,把它俩一并实现了,其中虚拟DOM的实现参考:
- Create your own virtual DOM to understand it (Part 1)
- Create your own virtual DOM to understand it (Part 2)
diff算法的实现参考:
实现效果如下
- 要渲染的列表的初始值
list = ['a1', 'b2', 'c3', 'd4', 'e5']
- 渲染结果
- 2秒后改变为
list = ['a1', 'd4', 'b2', 'c3', 'e5', 'f6']
- diff效果,绿色的为改变的DOM结果
- 5秒后改变为
list = ['e5', 'd4', 'f6', 'c3', 'a1', 'b2']
- diff效果,绿色的为改变的DOM结果
仓库地址
或
最后
欢迎 fork
回去改成自己喜欢的样子~