React笔记 （五）

• 当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，或者其他唯一标识。

转载于:https://juejin.im/post/5cb830885188251b23422f13