React-虚拟DOM

2020-02-06 09:43:16 阅读：163 来源： 互联网

先举个例子：

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 只需要确保与其他的兄弟节点唯一即可，不需要全局唯一

蓬莱老仙发布了274 篇原创文章 · 获赞 41 · 访问量 3万+ 私信关注

标签：DOM,React,虚拟,key,节点,属性
来源： https://blog.csdn.net/weixin_44486539/article/details/104181544

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React-虚拟DOM

Diff 算法

Diff 算法说明

key