React元素及虚拟Dom浅谈

什么是元素

元素是构成React应用的最小计量单位，元素描述的是开发想让用户看到的内容。

组件是由n个元素组成的。

元素的特性

1.不可变

一旦创建就无法改变其元素或者属性，代表了创建那一时刻的UI。

2.都是通过ReactDOM.render(JSX, DOM)函数进行渲染。

什么是虚拟Dom。

React只更新它需要更新的部分，这是根据虚拟dom的特性进行指定元素更新的。 虚拟dom实际就是一个对象，用来描述元素的名称方法及属性等：

const virtualDom = {$$typeof: Symbol(react.element),type: 'div',props: {class: 'index'},key: null,ref: null,_owner: null,children: [...],...
} 

虚拟Dom的优劣势

1.虚拟dom比起直接操作dom，多了一步创建对象的步骤
2.当全量对dom进行操作时，虚拟dom可以实现局部更新速度上会更具优势。
3.如果只是对dom进行进行局部增量编程，可以不使用虚拟dom，此时因为少一步创建对象步骤，会比虚拟dom快。
4.基于虚拟dom，React实现了一套跨浏览器、平台的事件机制，模拟了事件冒泡捕获，采取事件代理、批量更新的方法，解决了在不同平台、不同浏览器下的兼容性问题。

总结：使用虚拟dom，利用其React Fiber的diff更新机制，可以使我们无需手动对dom操作进行优化，保证了性能下限，并且其提供了跨平台的好处。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取