【10】基础知识:React - DOM的diffing算法

这篇具有很好参考价值的文章主要介绍了【10】基础知识:React - DOM的diffing算法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【10】基础知识:React - DOM的diffing算法,React,react.js,javascript,前端

一、虚拟 DOM 中 key 的作用

react/vue 中的 key 有什么作用?key的内部原理是什么?

简单来说:

key 是虚拟 DOM 对象的标识,在更新显示时 key 起着极其重要的作用,提高渲染效率,防止渲染错误。

详细的说:

当状态中的数据发生变化时,React 会根据【新数据】生成【新的虚拟DOM】

随后 React 进行【新虚拟DOM】与【旧虚拟DOM】的 diff 比较,比较规则如下:

1、【旧虚拟DOM】中找到了与【新虚拟DOM】相同的 key:

若虚拟 DOM 中内容没变,直接使用之前的真实 DOM

若虚拟 DOM 中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实 DOM

2、旧虚拟DOM中未找到与新虚拟DOM相同的key

根据数据创建新的真实 DOM,随后渲染到到页面

“就地复用” 策略:

当数据项的顺序发生改变时,他不会移动页面上的 DOM 元素匹配数据项顺序的改变,而是简单的复用此处的元素

如果绑定了 key 属性,就可对当前 DOM 元素进行唯一标识,在进行数据更新渲染时,会基于 key 的变化重新排列 DOM 元素的顺序

二、用 index 作为 key 可能会引发的问题

界面效果没问题, 但效率低:

若对数据进行,逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实 DOM 更新

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

根据 diffing 算法规则,所有 DOM 元素都需要都需要重生成新的真实 DOM:
存在相同key 0 和 1,但虚拟 DOM内容改成了,需要生成新的真实 DOM;
新增key2,需要生成新的真实 DOM。

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

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

界面有问题:

如果结构中还包含输入类的 DOM,会产生错误 DOM 更新

慢动作回放----使用 index 索引值作为 key (界面有问题)

根据 diffing 算法规则,内部 input “就地复用”策略顺序会错乱

初始数据:
{ 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>

注意:

如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用 index 作为 key 是没有问题的。

三、开发中如何选择key?

1、最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。

2、如果确定只是简单的展示数据,用 index 也是可以的。文章来源地址https://www.toymoban.com/news/detail-724591.html

四、示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>key的作用</title>
</head>
<body>
	<div id="test"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">		
		class Person extends React.Component {
			state = {
				persons: [
					{ id: 1, name: '小张', age: 18 },
					{ id: 2, name: '小李', age: 19 }
				]
			}

			add = () => {
				const { persons } = this.state
				const p = { id: persons.length + 1, name: '小王', age: 20 }
				this.setState({ persons: [p, ...persons] })
			}

			render() {
				return (
					<div>
						<h2>展示人员信息</h2>
						<button onClick={this.add}>添加一个小王</button>
						<h3>使用index(索引值)作为key</h3>
						<ul>
							{
								this.state.persons.map((personObj, index) => {
									return <li key={index}>{personObj.name}---{personObj.age}<input type="text" /></li>
								})
							}
						</ul>
						<hr />
						<hr />
						<h3>使用id(数据的唯一标识)作为key</h3>
						<ul>
							{
								this.state.persons.map((personObj) => {
									return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text" /></li>
								})
							}
						</ul>
					</div>
				)
			}
		}
		
		ReactDOM.render(<Person />, document.getElementById('test'))
	</script>
</body>
</html>

到了这里,关于【10】基础知识:React - DOM的diffing算法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【12】基础知识:React ajax

    了解 React 本身只关注于界面,并不包含发送 ajax 请求的代码 前端应用需要通过 ajax 请求与后台进行交互(json 数据) react 应用中需要集成第三方 ajax 库(或自己封装) 常用的 ajax 请求库 1、jQuery:比较重,如果需要另外引入不建议使用 2、axios:轻量级,建议使用 封装 XmlH

    2024年02月07日
    浏览(48)
  • 【前端知识】React 基础巩固(四十二)——React Hooks的介绍

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件 VS 函数式组件: class的优势: class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时

    2024年02月14日
    浏览(61)
  • 【前端知识】React 基础巩固(二十三)——React 性能优化 SCU相关

    React 的渲染流程 JSX - 虚拟 DOM - 真实 DOM React 的更新流程 props/state 改变 - render函数重新执行 - 产生新的DOM树 - 新旧DOM树进行diff - 计算出差异进行更新 - 更新到真实的DOM React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一颗不同的树 React 需要基于这两颗不同的

    2024年02月15日
    浏览(71)
  • React Native 样式布局基础知识

    通过此篇笔记能够学习到如下的几个知识点 在 React Native 中使用样式的一些细节 了解 React Native 的 Flex 布局概念 了解 React Native 的 flex 布局属性 React Native 如何添加多样式属性 React Native 中绝对布局和相对布局 1、主轴和交叉轴 在 Flex 布局中存在主轴和交叉轴的概念,主轴和交

    2024年02月13日
    浏览(31)
  • React Native 图片组件基础知识

    在 React Native 中使用图片其实跟 HTML 中使用图片一样简单,在 React Native 中我们使用 Image 组件来呈现图片的内容,其中主要的属性有: source 。这个属性主要是设置图片的内容,它可以是网络图像地址、静态资源、临时本地图像以及本地磁盘中的图像。 搭建基础框架 编写卡片

    2024年02月13日
    浏览(47)
  • React Native 文本输入基础知识

    在 React Native 中提供了一个文本输入组件 TextInput 。此组件主要是监听键盘输入事件,并把对应的输入值显示在组件中,此组件还提供了很多功能配置参数,例如自动更正、自动大写、占位符文本和不同的键盘类型(例如数字键盘)。 我们首先来编写一个简单的实例,使用

    2024年02月12日
    浏览(37)
  • 【01】基础知识:React简介与案例

    React 概述 React 是一个将数据渲染为 HTML 视图 的开源 JavaScript 库 React 由 FaceBook 开发,且开源 为什么要学习 React 1、原生 JavaScript 操作 DOM 繁琐、效率低(使用 DOM-API 操作 UI) 2、使用 JavaScript 直接操作 DOM,浏览器会进行大量的重绘重排 3、原生 JavaScript 没有组件化编码方案,

    2024年02月07日
    浏览(54)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(51)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件。 Router包括两个API: BrowserRouter使用history模式 HashRouter使用hash模式(路径后面带有#号) 尝试在项目中使用HashRouter: 安装Router 在 index.js 中引入并使用HashRouter Routes:包裹所有的Route,在其中匹配一个路由(

    2024年02月14日
    浏览(62)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包