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操作进行优化，保证了性能下限，并且其提供了跨平台的好处。