React-虚拟DOM | 易学教程

先举个例子：

import React from 'react'
import ReactDOM from 'react-dom'

let myRender = () => {
  let el = (
    <div>
      <h1>虚拟DOM</h1>
      <p>{new Date().toLocaleString()}</p>
    </div>
  )

  ReactDOM.render(el, document.getElementById('root'))
}

// 定时器每 1 秒执行一次
setInterval(myRender, 1000)

在这里插入图片描述

打开浏览器控制台，在 Elements 中会发现，只有数据改变的部分 DOM 才会进行更新；是因为在 react 中，数据发生改变时是通过虚拟 DOM 更新的；当数据发生改变时，会用最新的数据去修改模板形成新的虚拟 DOM，新的虚拟 DOM 和旧的虚拟DOM 通过 diff 算法进行比较找到需要更新的地方进行更新

Diff 算法

在 React 中有两种假设：

两个不同类型的元素会产生不同的树

开发者可以通过 key 属性指定不同树中没有发生改变的子元素

Diff 算法说明

如果两棵 DOM 树的根元素类型不同，React 会销毁旧树，创建新的 DOM 树。
对于类型相同的 React DOM 元素，React 会对比两者的属性是否相同，只更新不同的属性；当处理完这个 DOM 节点，React 就会递归去处理子节点。
当在某个父节点内子节点的后面添加兄弟节点时两棵 DOM 树可以很好的进行转化，但是当在最开始的位置插入子节点时 React 会改变每个子节点，这样大大的减少了效率，为了解决这种问题，React 提供了一个 key 属性；当子节点带有 key 属性，React 会通过 key 来匹配原始 DOM 树和后添加的 DOM 树。

key

key 属性在 React 内部使用，但不会传递给组件
在遍历数据时，推荐在组件中使用 key 属性：<li key={item.id}>{</li>
key 只需要确保与其他的兄弟节点唯一即可，不需要全局唯一

来源：CSDN

作者：蓬莱老仙

链接：https://blog.csdn.net/weixin_44486539/article/details/104181544

标签

react

dom