react 虚拟dom

当我们需要创建或更新元素时，React首先会让这个VitrualDom对象进行创建和更改，然后再将VitrualDom对象渲染成真实DOM

1 .为什么不直接对数据进行检测，比如某个array决定渲染了一个列表，那么后续对他的操作无非是删除，添加，排序。我们可以在操作这个数组的函数里面加个钩子，直接告诉框架我们对数据的操作，那么不就不用运行diff算法，这样是不是会更快呢
2 .然后直接已最小化代价操作Dom不是更好吗？
3 .有点类似于react hook里面useState()方法的专门针对每个数据的setState方法。

虚拟dom的优势

1 .提高开发效率

1 .只需要告诉react想让react处于什么状态，设置决定这个状态的数据，然后react会自动确保虚拟dom和实际渲染的Dom相匹配，你不需要自己去完成属性操作，事件处理，Dom更新的体力活

2 .提升性能

1 .首次渲染的时候虚拟dom甚至需要更多的计算，消耗更多的内存
2 .优势在于diff算法和批处理策略
3 .fiber策略
4 .VitrualDom帮助我们提高了开发效率，在重复渲染时它帮助我们计算如何更高效的更新，而不是它比DOM操作更快

3 .fiber

1 .复杂的react更新会卡死浏览器的进程，这个时候不能相应其他操作
2 .每次state更新的时候自动计算，如果计算量很大，会把更新过程拆解，异步化，释放浏览器主线程，保证页面可以被渲染，提高相应

4 .跨浏览器兼容
5 .跨平台兼容

虚拟dom原理

1 .React在渲染虚拟DOM时应用了批处理以及事务机制，以提高渲染性能。
2 .在IE（8-11）和Edge浏览器中，一个一个插入无子孙的节点，效率要远高于插入一整个序列化完整的节点树。

React通过lazyTree，在IE（8-11）和Edge中进行单个节点依次渲染节点，而在其他浏览器中则首先将整个大的DOM结构构建好，然后再整体插入容器。

并且，在单独渲染节点时，React还考虑了fragment等特殊节点，这些节点则不会一个一个插入渲染。

注意

1 .babel在编译jsx代码的时候，会判断jsx中组件的首字母
2 .当字母是小写的时候，被认定是原生dom标签，直接编译为字符串
3 .当字母是大写的时候，会被认为是组件，直接编译为对象传入createElement函数