• 十一、DOM的Diffing算法

    一、验证Diffing算法

    在这里插入图片描述

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>title>
    8. head>
    9. <body>
    10.    <div id="app">div> 
    11.     
    12.   
    13.   
    14.   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin>script>
    15.   
    16.   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>script>
    17.   
    18.   <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
    19.    
    20.    <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js">script>
    21.  
    22.   
    23.   <script type="text/babel">
    24.  
    25.     //创建组件
    26.     class Timer extends React.Component{
    27.         state={date:new Date()}
    28.  
    29.         componentDidMount(){
    30.             console.log("ok");
    31.             setInterval(() => {
    32.                 this.setState({date:new Date()})
    33.             }, 1000);
    34.         }
    35.         render (){
    36.           //只有整个span标签（不只是内容还有span标签）更新了，h1和input没有变化没有更新还是原来的真实DOM，在input中输入内容内容不变所以没有更新DOM还是原来的
    37.             return(
    38.                 <div>
    39.                     <h1>helloh1>
    40.                     <input type="text"/>
    41.                     <span>现在是：{this.state.date.toTimeString()}span>
    42.                 div>
    43.             )
    44.         }
    45.  
    46.       
    47.  
    48.     
    49.  
    50.     }
    51.  
    52.  
    53.     //2.渲染虚拟DOM到页面
    54.     ReactDOM.render(<Timer />,document.getElementById('app'))
    55.  
    56.  
    57.  
    58.     
    59.   script>
    60.  
    61. body>
    62. html>

    二、key的作用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>title>
    8. head>
    9. <body>
    10.    <div id="app">div> 
    11.     
    12.   
    13.   
    14.   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin>script>
    15.   
    16.   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>script>
    17.   
    18.   <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
    19.    
    20.    <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js">script>
    21.  
    22.   
    23.   <script type="text/babel">
    24. /*
    25.  
    26.  
    27. 2.2 关于key的经典面试题
    28. 1). react/vue中的key有什么作用？（key的内部原理是什么？）
    29. 2). 为什么遍历列表时，key最好不要用index?
    30.  
    31. 2.2.1 虚拟DOM中key的作用
    32. 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
    33.  
    34. 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
    35.  
    36. a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
    37. 	(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
    38. 	(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
    39. b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
    40. 	根据数据创建新的真实DOM，随后渲染到到页面
    41.  
    42. 2.2.2 用index作为key可能会引发的问题
    43. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    44. 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
    45.  
    46. 如果结构中还包含输入类的DOM：
    47. 会产生错误DOM更新 ==> 界面有问题
    48.  
    49. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
    50. 仅用于渲染列表用于展示，使用index作为key是没有问题的
    51. 2.2.3 开发中如何选择key?
    52. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
    53. 如果确定只是简单的展示数据，用index也是可以的
    54.  
    55.  
    56.  
    57. */
    58.  
    59.  
    60.  
    61.  
    62.  
    63. /*
    64. 慢动作回放-----使用index索引值作为key
    65.  
    66. 初始数据：
    67. {id:1,name:'小张',age:18},
    68. {id:2,name:'小李',age:19}
    69. 初始的虚拟DOM：
    70. <li key=0>小张----18li>
    71. <li key=1>小李----19li>
    72.  
    73. 更新后的数据
    74. {id:3,name:'小王',age:20}
    75. {id:1,name:'小张',age:18},
    76. {id:2,name:'小李',age:19}
    77. 更新后的虚拟DOM：（小王是先遍历的所以是0）
    78. <li key=0>小王----18li>
    79. <li key=1>小张----18li>
    80. <li key=2>小李----19li>
    81.  
    82. 旧的（初始）虚拟DOM和更新后的新的虚拟DOM对比
    83. 明明小张和小李可以复用，但是用了index作为key，导致索引值变了，导致了没有必要的真实DOM更新。
    84.  
    85.  
    86. 慢动作回放-----使用id(唯一标识)作为key
    87.  
    88. 初始数据：
    89. {id:1,name:'小张',age:18},
    90. {id:2,name:'小李',age:19}
    91. 初始的虚拟DOM：
    92. <li key=1>小张----18li>
    93. <li key=2>小李----19li>
    94.  
    95. 更新后的数据
    96. {id:3,name:'小王',age:20}
    97. {id:1,name:'小张',age:18},
    98. {id:2,name:'小李',age:19}
    99. 更新后的虚拟DOM：（小王是先遍历的所以是0）
    100. <li key=3>小王----18li>
    101. <li key=1>小张----18li>
    102. <li key=2>小李----19li>
    103.  
    104. 旧的（初始）虚拟DOM和更新后的新的虚拟DOM对比
    105. 没有key等于3的虚拟DOM那就转为真实DOM放到页面
    106. 问旧的虚拟DOM你那有key等于1和key等于2的虚拟DOM吗，有，那么就直接复用了，不再生成新的真实DOM了也不往页面上放了
    107.  
    108. */
    109.  
    110.     //创建组件
    111.     class Person extends React.Component{
    112.         state={
    113.             person:[
    114.                 {id:1,name:'小张',age:18},
    115.                 {id:2,name:'小李',age:19}
    116.             ]
    117.         }
    118.  
    119.         add=()=>{
    120.             const {person}=this.state
    121.             const p={id:person.length+1,name:'小王',age:20}
    122.             this.setState({person:[p,...person]})
    123.         }
    124.  
    125.     
    126.         render (){
    127.             return(
    128.                 <div>
    129.                     <h2>展示人员信息h2>
    130.                     <button onClick={this.add}>添加一个小王button>
    131.                     <h3>使用index索引值作为keyh3>
    132.                     <ul>
    133.                     {
    134.                         this.state.person.map((personObj,index)=>{
    135.                             return <li key={index}>{personObj.name}----{personObj.age}<input type="text"/>li>
    136.                         })
    137.                     }
    138.                     ul>
    139.                     <br/><br/>    
    140.                     <h3>使用id(数据的唯一标识)作为keyh3>
    141.                     <ul>
    142.                     {
    143.                         this.state.person.map((personObj)=>{
    144.                             return <li key={personObj.id}>{personObj.name}----{personObj.age}<input type="text"/>li>
    145.                         })
    146.                     }
    147.                     ul>
    148.                 div>
    149.             )
    150.         }
    151.  
    152.       
    153.  
    154.     
    155.  
    156.     }
    157.  
    158.  
    159.     //2.渲染虚拟DOM到页面
    160.     ReactDOM.render(<Person />,document.getElementById('app'))
    161.  
    162.  
    163.  
    164.     
    165.   script>
    166.  
    167. body>
    168. html>

  • 相关阅读:
    买卖股票的最佳时机(系列)
    k8s docker cgroup驱动问题 —— 筑梦之路
    LeetCode_730_每日温度
    Android 插件开发框架 总结
    vue3项目中引用tailwindcss与heroicons
    【SUMO学习】初级 Driving in Circles
    三维模型3DTile格式轻量化在三维展示效果上的重要性分析
    【Mysql】复合查询详解+实战操作（多表查询、自链接、子查询等）
    [含毕业设计论文+PPT+源码等]springboot巧匠家装小程序+Java后台管理系统|前后分离VUE
    大语言模型构建的主要四个阶段（各阶段使用的算法、数据、难点以及实践经验）
  • 原文地址：https://blog.csdn.net/chunxiaqiudong5/article/details/126287113