为什么虚拟dom会提高性能
因为虚拟dom相当于在真实dom间加了层缓存,极大减少了直接dom操作
react用js对象存储虚拟dom树,当state发生变化时,生成新的虚拟dom树,利用diff算法对比前后两个虚拟dom树,将差异跟新到真实dom树上
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
diff算法
深度优先遍历虚拟dom,返回一个补丁包,补丁内以action形式存储, keys包含 删除,替换等标识,从根结点开始,同层比较,优先判断节点类型,某节点不一致的时候直接替换该节点的子树。
合并操作,标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的组件进行重新绘制