React---虚拟DOM与DOM Diffing算法

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---虚拟DOM与DOM Diffing算法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、key的做用

1. 虚拟DOM中key的做用:
           1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的做用。
           2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 
                                 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则以下:
                                    a. 旧虚拟DOM中找到了与新虚拟DOM相同的key:
                                                (1).若虚拟DOM中内容 没变, 直接使用以前的真实DOM
                                                (2).若虚拟DOM中内容 变了, 则生成新的真实DOM,随后替换掉页面中以前的真实DOM
                                    b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
                                                根据数据 建立新的真实DOM,随后 渲染到到页面
                                    
2. 用index做为key可能会引起的问题:
            1). 若对数据进行:逆序添加、逆序删除等破坏顺序操做:
                        会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

             2). 若是结构中还包含输入类的DOM:
                        会产生错误DOM更新 ==> 界面有问题。
                                                
             3).注意!若是不存在对数据的逆序添加、逆序删除等破坏顺序操做,
                         仅用于渲染列表用于展现,使用index做为key是没有问题的。
                    
3. 开发中如何选择key
             1.最好使用每条数据的惟一标识做为key, 好比id、手机号、身份证号、学号等惟一值。
             2.若是肯定只是简单的展现数据,用index也是能够的。

2、Diffing 算法

  React 执行 Render() 函数时,会生成一次虚拟 DOM,当组件再次更新时,会再生成一颗新的树,而后 React 会对比两棵树的异同,执行更新算法。React 经过以下方法比较 DOM 的异同,其复杂度为 O(n):react

  • 两个不一样类型的元素会产生出不一样的树
  • 开发者能够经过 key prop 来暗示哪些子元素在不一样的渲染下能保持稳定

1. 比对不一样类型的元素

  当根节点为不一样类型的元素时,React 会拆卸原有的树而且创建起新的树。举个例子,当一个元素从 <a> 变成 <img> 或者 DOM 节点被销毁,都会触发一个完整的重建流程。算法

2. 比对同一类型的元素

  当比对两个相同类型的 React 元素时,React 会保留 DOM 节点,仅比对及更新有改变的属性。函数

 

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。spa