React笔记 (五)虚拟DOM执行原理和diff算法与key值

169 阅读1分钟
  • 当state或props发生改变的时候,render函数就会重新执行,所以每当数据更新的时候,页面都会同步变化。

虚拟DOM

传统操作DOM:

1、state数据
2、JSX模板
3、数据与模板结合,生成真实DOM
4、state数据发生变化
5、数据与模板结合,生成真实DOM,来替换之前的DOM

虚拟DOM:

1、state数据
2、JSX模板
3、数据与模板结合,生成真实DOM
4、同时生成一个虚拟DOM,(虚拟DOM就是一个用来描述真实DOM的对象)
5、state数据发生变化
6、新生成一个虚拟DOM
7、与之前的虚拟DOM作比较,找出区别
8、最后操作DOM改变有去别的内容

diff算法 diffrence Key值

  • React限制setState的频率。
  • diff算法是虚拟dom向比对用到的算法,React虚拟dom比对规则为同级向比较,先比较第一层,如果不一样,则停止比较直接覆盖新的dom,如果一样,则继续向下级比较。
  • React的key值的目的是为了进一步优化性能,react在渲染列表的时候优先会那key值一样的dom去对比,之后会很容易的区分出区别然后替换。所以列表的key值尽量不要用index,因为index会根据列表的变化而改变,key值最好选用item,或者其他唯一标识。