React 虚拟DOM和Diff算法理解

一、虚拟DOM

1.原始DOM操作

2.优化掉全部替换，提升了性能

3.react使用虚拟DOM概念提升极致性能

由于react虚拟dom的设计理念，使得它可以进行跨端的应用开发，比如安卓，ios，只需要使用特定的框架比如react native把本来虚拟dom生成的真实dom，换成安卓、ios的原生应用组件，就可以实现跨端开发

这段代码就是React底层用来生成虚拟dom的方法，效果等价于上边return的JSX语法,只是更底层的，React用虚拟dom来对比，生成真实的dom节点

---------------------------------------------------------------------------------------------------------------------------------

二、虚拟DOM比对Diff算法

1.虚拟dom什么时候会被比对？

当数据发生改变时(state、props)，虚拟dom会发生比对

2.setState方法

setState是异步的，为了提升react底层性能

当setState被多次调用，会合并成一次进行虚拟dom比对渲染，这样会省去额外的比对损耗

3.diff算法

两个虚拟dom会进行同级比对，当同级不一致时，就会把当前级别和他下属的所有子节点虚拟dom进行替换,生成新的dom，虽然有造成dom重新渲染浪费，但是这样的比对算法会非常的块，变相提升性能

开始有5个红色数据，生成了一个虚拟dom树

后来又生成了一个蓝色的虚拟dom对比树

react给每一个虚拟dom树节点加一个key标识，用这个key来对比会很快，很快能找出不一样的节点，然后加入到虚拟dom树里进行渲染

所以，很不建议吧数组下标作为key值，这样如果删除了某个节点，虚拟dom树中的key就会混乱，导致对比性能下降，尽量使用id或者唯一的字段来作为key

---------------------------------------------------------------------------------------------------------------------------------