react中DOM的diffing算法

最新推荐文章于 2024-08-08 11:01:19 发布
最新推荐文章于 2024-08-08 11:01:19 发布
阅读量158 收藏
点赞数 1
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l529936997/article/details/119534154
版权

在这里插入图片描述

diffing算法渲染dom时会进行判断比较 如果当前标签内容未改变,就不会进行替换,如果改变就只替换改变的标签

diffing算法替换的最小单位是标签

下列情况 如在h2标签内有个span标签, diffing进行比较时,h2标签中的时间值是一直改变的 所以进行替换
但是h2中的input标签并未改变, 所以在替换h2标签内容时 会再检索下一层子标签span
检测到只是h2标签内的时间值改变 而子标签内容并未改变,它会只替换时间值,并不替换子标签中的未改变的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <style>
        .title{
            width: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <!-- 准备一个"容器" -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">

  
    //1.创建组件
    class Demo extends  React.Component{

            //初始化状态
            state = {
                Time:new Date()
            }
        componentDidMount(){
            setInterval(()=>{
                this.setState({
                    Time:new Date()
                })
            },1000)
        }


        //状态初始化和更新之后
         render() {
            console.log('Demo--render');
             return (
                 <div>
                    <h1>hello</h1>
                    <input/>
                    { 
                //      diffing算法渲染dom时会进行判断比较 如果当前标签内容未改变,就不会进行替换,如果改变就只替换改变的标签
                //     diffing算法替换的最小单位是标签 
                //     下列情况 如在h2标签内有个span标签, diffing进行比较时,h2标签中的时间值是一直改变的 所以进行替换 
                //     但是h2中的input标签并未改变, 所以在替换h2标签内容时 会再检索下一层子标签span 
                //     检测到只是h2标签内的时间值改变 而子标签内容并未改变,它会只替换时间值,并不替换子标签中的未改变的内容
            }
                     <h2>当前时间:{this.state.Time.toTimeString()}<span><input/></span></h2>

                 </div>
             )
         }
     }
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

经典面试题:

1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?
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也是可以的。

举个栗子

这个是用index作为唯一标识进行渲染

这种情况下 如果有一千次渲染 添加一条数据进去 就要重新渲染1001次
而使用自定义的id则不会出现这种情况
两种相比 第二种效率更高
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key</title>
    <style>
        .title{
            width: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <!-- 准备一个"容器" -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">
    /*
    经典面试题:
    1). react/vue中的key有什么作用？（key的内部原理是什么？）
    2). 为什么遍历列表时，key最好不要用index?
    
            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也是可以的。
                                
    */
   

    	/* 
		慢动作回放----使用index索引值作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=0>小张---18<input type="text"/></li>
					<li key=1>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=0>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>
*/
  
    //1.创建组件
    class Demo extends  React.Component{

            //初始化状态
            state = {
               list:[
                   {id:1,name:'小张',age:19},
                   {id:2,name:'小李',age:10},
                   {id:3,name:'小康',age:30},

               ]
            }

        add(){
            const {list} = this.state
            const p1 = {id:list.length+1,name:'小欧',age:12}
            setInterval(()=>{
                this.setState({
                    list:[p1,...list]
                })
            },1000)

        }

        //状态初始化和更新之后
         render() {
            console.log('Demo--render');
             return (
                 <div>
                    <h1>人员展示</h1>
                    <button onClick={this.add.bind(this)}>添加</button>
                    <ul>
                        {this.state.list.map((item,index)=>{
                            return <li key={index}>{item.name}---{item.age}</li>
                        })}    
                    </ul>
                 </div>
             )
         }
     }
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

使用id作为索引值

如果是对数据进行添加
可以在添加时添加在数组的尾部
如数组.push()
或者在这里插入图片描述
如果是用index并在结构中包含输入类的dom后果如下
在这里插入图片描述

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key</title>
    <style>
        .title{
            width: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <!-- 准备一个"容器" -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">
    /*
    经典面试题:
    1). react/vue中的key有什么作用？（key的内部原理是什么？）
    2). 为什么遍历列表时，key最好不要用index?
    
            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也是可以的。
                                
    */


    	/* 
		慢动作回放----使用index索引值作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=0>小张---18<input type="text"/></li>
					<li key=1>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=0>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>
*/



/*
        	慢动作回放----使用id唯一标识作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=3>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

*/  
    //1.创建组件
    class Demo extends  React.Component{

            //初始化状态
            state = {
               list:[
                   {id:1,name:'小张',age:19},
                   {id:2,name:'小李',age:10},
                   {id:3,name:'小康',age:30},

               ]
            }

        add(){
            const {list} = this.state
            const p1 = {id:list.length+1,name:'小欧',age:12}
            setInterval(()=>{
                this.setState({
                    list:[p1,...list]
                })
            },1000)

        }

        //状态初始化和更新之后
         render() {
            console.log('Demo--render');
             return (
                 <div>
                    <h1>人员展示</h1>
                    <button onClick={this.add.bind(this)}>添加</button>
                    <h3>使用index（索引值）作为key</h3>
                    <ul>
                        {this.state.list.map((item,index)=>{
                            return <li key={index}>{item.name}---{item.age}<input type='text' /></li>
                        })}    
                    </ul>
                    <hr/>
                    <hr/>
                    
					<h3>使用id（数据的唯一标识）作为key</h3>
                    <ul>
                        {this.state.list.map((item,index)=>{
                            return <li key={item.id}>{item.name}---{item.age}<input type='text' /></li>
                        })}    
                    </ul>
                 </div>
             )
         }
     }
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>
爱吃囍囍丸子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react技术全家桶（34）react-DOM的diffing的算法
weixin_41380194的博客
03-20 327
react 每一次渲染都不是对真实DOM进行修改的。每个真实DOM都会对应一个虚拟DOM 每次都会讲虚拟DOM和真是DOM进行比较，如果有变化才会修改真是的DOM。 两者对比的力度是标签。没有改变的标签不会动 只有改变的标签才会进行对真实的DOM操作。如上图span会变化 其他的不会变化 可以在input中输入值 会发现 时间在动 但是文本框中的值没变化 所以inputDOM没有刷新。 对于标签套标签： diffing的算法是 :只改变span中的文本内容 对于span中的标签是否刷新 就看.
React - DOM 的 diffing 算法
技术共享，共同进步！
02-18 563
DOM 的 diffing 算法一. react、vue中 for 循环中每一项的key有什么作用二. 用index作为key可能会引发的问题三. 开发中如何使用key 一. react、vue中 for 循环中每一项的key有什么作用 key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 .当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】 随后react进行【新虚拟DOM】与【旧虚拟DOM】的diffing比较，比较规则如下： 旧虚拟DOM中找到了与新虚拟DO
0208DOM的diffing算法-React
gaogzhen的博客
03-27 572
0208DOM的diffing算法-React
React中DOM的diffing算法
weixin_44003391的博客
12-10 596
React中DOM的diffing算法
React基础—Diffing 算法
梦否
05-27 605
1. Diffing 算法 React是基于虚拟DOM树的，也就是要对比原来的结构和预期更新后的树结构。那么这个过程是怎么完成的，这里做一个简单的记录。 从根节点开始比较，如果根节点为不同类型的元素时，React会拆卸原有的树并且建立起新的树。也就是会重建整个树结构。 如果为相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性。 然后递归的完成对对子节点的对比操作； 而，为什么我们在使用数组map遍历的时候，必须指定一个key属性？ 其实，这也是出于重建每个元素所带
【10】基础知识：React - DOM的diffing算法
weixin_45559449的博客
10-14 392
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用，提高渲染效率，防止渲染错误。1、最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。若对数据进行，逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新。当状态中的数据发生变化时，React 会根据【新数据】生成【新的虚拟DOM】key的内部原理是什么？
react DOM的diffing算法
weixin_44761131的博客
08-02 59
react DOM的diffing算法
React中的Diffing算法
最新发布
Corgi001的博客
08-08 146
这样可以避免上述问题。例如，如果你的数据是从数据库中获取的，通常每条记录都有一个唯一的ID，这个ID就可以用作。属性来帮助React识别哪些项被修改、添加或者删除。这有助于提高性能并确保正确的组件更新。这是因为索引是最直接且简单的标识符，可以用来跟踪每个列表项的位置。因此，在React中推荐的做法是为列表项提供一个稳定的唯一标识符作为。在React中，当你渲染一个列表时，通常会为每个元素添加一个。，React会默认使用数组的索引(index)作为。如果不显式地为列表项提供一个。
前端项目-react-dom.zip
09-02
当React组件的状态改变时，React会计算出新的虚拟DOM树，并与旧的树进行对比，找出最小的变更集，然后应用这些变更到实际的DOM上，这个过程被称为"Reconciliation"或"Diffing"算法，大大提升了性能。 React DOM提供...
前端开源库-react-dom-core
08-30
在“react-dom-core-master”这个压缩包中，可能包含了React DOM Core的源码，这将帮助开发者深入理解React DOM的实现细节，包括如何优化DOM操作，如何处理事件，以及内部的更新流程等。通过阅读和学习这些源码，...
React基本技术介绍
06-11
- 当组件的状态改变时，React 会比较新旧虚拟 DOM 的差异（Diffing 算法），只更新必要的部分，避免了不必要的 DOM 更新带来的性能开销。 2. **组件化：** - React 提倡将用户界面分解为一系列可复用的组件。 - ...
React学习培训讲义 .docx
08-11
当应用状态改变时，React先在虚拟DOM中计算新的UI布局，然后通过Diffing算法找出最小的DOM变更集，再将这些变更应用到实际DOM上，从而提高了性能。 JSX是React引入的一种类似XML的JavaScript扩展语法，使得编写UI...
redux中间件详解
l529936997的博客
07-30 2217
1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 通俗来说，redux中间件就是对dispatch的功能做了扩展。 先来看一下传统的redux执行流程： 图
通过axios实现的一个搜索查询展示案例
l529936997的博客
08-11 1607
代码如下: App.js import React, { Component } from 'react' import {Search,List} from './components'; export default class App extends Component { //初始化状态 state={ users:[],//users初始值为数组 isFirst:true,//是否为第一次打开页面 isLoading:false,//标识是否处于加载中...
react路由完整版详解
l529936997的博客
08-12 982
react中的路由有三种实现方式 前端主要是通过react-router-dom实现 在index文件中引入一个 BrowserRouter或者HashRouter 将APP根组件包裹起来 这是两种模式 相当于vue中的hash和history模式 一个带#号一个不带 在主页面中引入<Route>//路由标签 用于在展示区进行路径的匹配 component={路由组件名} 例如 <Route path='/Home' component={Home}></Route&g
react中样式组件 styled-components
l529936997的博客
08-09 725
使用styled-component 例如: 创建全局样式组件style.js 先在styled-component中解构一个createGlobalStyle出来 然后直接使用模板字符串在createGlobalStyle后面书写css样式 并传值给一个常量 然后抛出 然后在入口文件index.js中引入style.js文件并解构出抛出的GlobalStyle 然后在下方render内直接引入这个GlobalStyle标签 引入局部 创建一个home.js作为局部样式组件, 同样的,先在
React基础笔记
l529936997的博客
07-26 532
ECMAScript6 1、ES6简介 1.1、什么是ES6 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.2、ECMAScript和JavaScript的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript
React虚拟DOM与DOMDiffing算法解析
"React虚拟DOM和DOMDiffing算法的讲解" 在React开发中，虚拟DOM（Virtual DOM）是一种关键概念，它极大地提高了应用的性能。React虚拟DOM是React库用来优化真实DOM操作的一种技术。虚拟DOM允许我们在内存中快速地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃囍囍丸子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值