react 从入门到实践之 react 的虚拟 DOM 和 Diff 算法

灰太狼 2022-10-21 14:52 129阅读 0赞

#### 一、react 的虚拟 DOM 和 Diff 算法 ####

1.  虚拟 `DOM`和`diff`算法是 `React`中非常核心的两个概念, 我们需要对此有一个很全面的认知。这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助。
2.  对于虚拟 `DOM`的内部执行流程，如下所示：

*  用 `JavaScript` 对象结构表示 `DOM` 树的结构；然后用这个树构建一个真正的 `DOM` 树，插到文档当中;
 *  当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;
 *  把步骤 2 所记录的差异应用到步骤 1 所构建的真正的 `DOM`树上，视图就更新了。

1.  对于虚拟`DOM`的原理剖析，如下所示：

*  `Virtual DOM` 本质上就是在 `JS` 和 `DOM` 之间做了一个缓存。可以类比 `CPU` 和硬盘，硬盘读取速度比较慢，我们会就在它们之间加缓存条；
 *  反之, 既然 `DOM` 运行速度慢，那么我们就在 `JS` 和 `DOM` 之间加个缓存。`JS` 只操作 `Virtual DOM`，最后的时候再把变更的结果写入 `DOM`。

1.  对于 `diff`算法，如下所示：

*  如果两棵树的根元素类型不同，`React`会销毁旧树，创建新树
 *  对于类型相同的`React DOM` 元素，`React`会对比两者的属性是否相同，只更新不同的属性; 当处理完这个 `DOM` 节点，`React`就会递归处理子节点。
 *  遍历插入元素, 如果没有 `key`, `React`将改变每一个子删除重新创建; 为了解决这个问题，`React`提供了一个 `key` 属性。当子节点带有`key`属性，`React`会通过 `key` 来匹配原始树和后来的树。

1.  对于 `diff` 算法的执行过程，通过绑定 `key`, `React`就知道带有`key '1024'` 的元素是新的，对于 `'1025'` 和 `'1026'` 仅仅移动位置即可。
2.  对于其中 `key` 的使用注意，如下所示：

*  `key` 属性只会在 `React` 内部使用，不会传递给组件
 *  在遍历数据时，推荐在组件中使用 `key` 属性，`<li key={obj.id}>{obj.t}</li>`
 *  `key` 只需要保持与他的兄弟节点唯一即可，不需要全局唯一
 *  尽可能的减少数组 `Index` 作为 `key`，数组中插入元素的等操作时，会降低效率

1.  对于 `react` 的虚拟 `DOM`和`Diff`算法，可应用于九宫格案例，代码如下所示：

<script type="text/babel">
        class FlexView extends React.Component { 
          constructor (props) { 
            super(props)
            this.state = { 
              shopArr: []
            }
          }
    
          static defaultProps = { 
            dataArr: [
              { 
                  "icon": "f1",
                  "name": "番茄"
              },
              { 
                  "icon": "f2",
                  "name": "苹果"
              },
              { 
                  "icon": "f3",
                  "name": "水蜜桃"
              },
              { 
                  "icon": "f4",
                  "name": "香蕉"
              },
              { 
                  "icon": "f5",
                  "name": "蓝莓"
              },
              { 
                  "icon": "f6",
                  "name": "菠萝"
              },
              { 
                  "icon": "f7",
                  "name": "草莓"
              },
              { 
                  "icon": "f8",
                  "name": "猕猴桃"
              },
              { 
                  "icon": "f9",
                  "name": "橙子"
              }
            ]
          }
    
          render () { 
            return (
              <div className="box">
                <div className="top">
                  <button onClick={ () => this._addShop()}>Add</button>
                  <button onClick={ () => this._removeShop()}>Remove</button>
                </div>
                <div className="bottom">
                  { this.state.shopArr}
                </div>
              </div>
            )
          }
    
          // 添加商品的方法
          _addShop () { 
            // 相关的变量
            const cols = 3, shopW = 100, shopH = 120, width = 320, height = 420
            // 取出数据
            const {  dataArr } = this.props
            // 取出下标
            const index = this.state.shopArr.length
            if (index >= 9) { 
              alert('已经买了很多水果，不能再买了')
              return
            }
            // 求出子组件的行和列
            const row = Math.floor(index / cols)
            const col = Math.floor(index % cols)
            // 求出当前的盒子的left和top
            const xSpace = (width - cols * shopW) / (cols - 1)
            const ySpace = (height - 3 * shopW) / 2
            const left = col * (shopW + xSpace)
            const top = row * (shopH + ySpace)
            // 创建子组件装入数组
            const shopView = (
              <div className="item" style={ { left, top}} key={ index}>
                  <img src={ 'images/' + dataArr[index].icon + '.png'}
                    style={ { width: shopW * 0.8, height:shopW*0.8}}
                  />
                  <span>{ dataArr[index].name}</span>
              </div>
            )
            // 更新状态
            const tempArr = this.state.shopArr
            tempArr.push(shopView)
            this.setState({ 
              shopArr: tempArr
            })
          }
    
          // 删除商品的方法
          _removeShop () { 
            const tempArr = this.state.shopArr
            if (tempArr.length === 0) { 
              alert('购物车空空如也')
              return
            }
            tempArr.pop()
            this.setState({ 
              shopArr: tempArr
            })
          }
        }
    
        // 渲染组件
        ReactDOM.render(<FlexView />, document.getElementById('app'))
      </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 React之虚拟DOM和diff算法

虚拟DOM和diff算法 createEmement 创建组件 JSX转换过程虚拟DOM diff算法递归实现diff算法 crea

迷南。/ 2023年01月12日 11:53/ 0 赞/ 138 阅读

相关虚拟dom和diff算法

snabbodm 码云地址 [https://gitee.com/blueskyliu/snabbdom.git][https_gitee.com_blueskyliu_

刺骨的言语ヽ痛彻心扉/ 2023年01月03日 12:58/ 0 赞/ 100 阅读

相关 web前端高级React - React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤

系列文章目录 [第一章：React从入门到进阶之初识React][React_React] [第二章：React从入门到进阶之JSX简介][React_JSX]

叁歲伎倆/ 2023年01月01日 01:56/ 0 赞/ 177 阅读

相关 react虚拟DOM 中的 diff 算法

1. 定义 state,有了数据 2. 有一个模板 3. 数据 + 模板生成虚拟 DOM(虚拟 DOM 就是一个 js对象, 用它来描述真实 DOM) 4. 用虚拟 D

深碍√TFBOYSˉ_/ 2022年12月10日 02:27/ 0 赞/ 184 阅读

相关 react 从入门到实践之 react 的虚拟 DOM 和 Diff 算法

一、react 的虚拟 DOM 和 Diff 算法 1. 虚拟 `DOM`和`diff`算法是 `React`中非常核心的两个概念, 我们需要对此有一个很全面的认知。这

灰太狼/ 2022年10月21日 14:52/ 0 赞/ 130 阅读

相关 react 从入门到实践之 react 的生命周期函数和原理

一、react 的生命周期函数 1. 组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目

╰+哭是因爲堅強的太久メ/ 2022年10月21日 14:52/ 0 赞/ 149 阅读

相关 react 从入门到实践之基础总结二

一、React中的组件/模块、组件化/模块化 1. 对于组件，如下所示：一个应用/版块/页面中用于实现某个局部的功能(包括 `html, js, css`

女爷i/ 2022年10月21日 14:52/ 0 赞/ 135 阅读

相关 React虚拟DOM和DIFF算法

VDOM VDOM，也叫虚拟 DOM，它是仅存于内存中的 DOM，因为还未展示到页面中，所以称为 VDOM var vdom = document.create

Myth丶恋晨/ 2022年07月24日 10:20/ 0 赞/ 209 阅读

相关 React之虚拟DOM

React非常快速是因为它从不直接操作DOM。在React中，render执行的结果得到的并不是真正的DOM节点，而仅仅是JavaScript对象，称之为虚拟DOM。虚

Myth丶恋晨/ 2022年05月10日 08:52/ 0 赞/ 160 阅读

相关 React-虚拟dom-diff算法，Levenshtein Distance最小编辑距离

Levenshtein Distance是最小编辑距离的一种实现，网上搜到的一些python的实现，现在用前端的JavaScript来实现一下。什么是最小编辑距离？请看[斯坦福

太过爱你忘了你带给我的痛/ 2021年06月10日 20:40/ 0 赞/ 414 阅读