React中key的讲解
通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图。更新的过程是由数据驱动的,新的数据自该组件顶层向下流向子组件,每个组件调用自己的render方法得到新的视图,并与之前的视图作diff-比较差异,完成更新,这是react实现的diff算法。这个过程就叫作reconciliation-调和。
React通过virtual dom来实现高效的视图更新。基本原理是用纯js对象模拟dom树,每当更新时,根据组件们的render方法计算出新的虚拟dom树,并与此前的虚拟dom树作diff,得到一个patch(差异补丁),最后映射到真实dom树上完成视图更新。而两棵树的完全的 diff 算法是一个时间复杂度为 O(n^3)的问题。但是在前端当中,很少出现跨越层级移动DOM元素的情况,所以React采用了简化的diff算法,只会对virtual dom中同一个层级的元素进行对比,这样算法复杂度就可以达到 O(n)。
由于React采用的diff算法是对新旧虚拟dom树同层级的元素挨个比较,碰到循环输出的元素时会有一些问题,比如列表。先来看一个例子:
1 |
// 旧v-dom |
React在diff两棵树时,发现原来的两个li元素都与新v-dom中对应位置上的两个li元素不同,就会对其修改,并向真实dom树中插入新的second节点。实际上,我们可能只是进行了在first之前插入新zero节点的操作,而现在进行了额外的修改操作。
React官方文档提示我们应该使用key属性来解决上述问题。key是一个字符串,用来唯一标识同父同层级的兄弟元素。当React作diff时,只要子元素有key属性,便会去原v-dom树中相应位置(当前横向比较的层级)寻找是否有同key元素,比较它们是否完全相同,若是则复用该元素,免去不必要的操作。
延续第一个例子,如果每个li元素都有key属性:
1 |
// 旧v-dom |
现在React就知道了,新增了key为”0”的元素,而”1”与”2”仅仅移动了位置。
key必须是字符串类型,它的取值可以用数据对象的某个唯一属性,或是对数据进行hash来生成key。
1 |
<ul> |
但是强烈不推荐用数组index来作为key。如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。来看下例子:
1 |
<ul>{list.map((v,idx)=><li key={idx}>{v}</li>)}</ul> |
React发现key为0,1,2的元素的text都变了,将会修改三者的html,而不是移动它们。
- 文章参考至zenggo曾狗
React中key的讲解的更多相关文章
- 【react】---react中key值的作用
一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- React中key的必要性与使用
React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图.更新的过程是由数据驱动的,新 ...
- react中key值的理解
react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...
- react中key的使用
面试题: 1). react/vue中的key的作用/内部原理 2). 为什么列表的key尽量不要用index 虚拟DOM的key的作用? 1). 简单的说: key是虚拟DOM对象的标识, 在更新显 ...
- React之事件绑定、列表中key的使用
在学习React的Hadding Events这一章节,发现事件回调函数的几种写法,看似区别不大,但实际差异还是蛮大的. class Toggle extends React.Component{ c ...
- React 中的key值
在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- react中使用redux简易案例讲解
为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...
随机推荐
- 卷积神经网络---padding、 pool、 Activation layer
#coding:utf-8 import tensorflow as tf tf.reset_default_graph() image = tf.random_normal([1, 112, 96, ...
- centos 7搭建 strongSwan
https://blog.csdn.net/sqzhao/article/details/76093994
- 使用mha 构建mysql高可用碰到几个问题
根据网上配置,安装好mha ,建议到https://code.google.com/archive/p/mysql-master-ha/downloads 下载0.56版本 1.首先先确定各个主机之 ...
- C++ malloc函数
malloc的全称是memory allocation,中文叫动态内存分配,用于申请一块连续的指定大小的内存块区域以void*类型返回分配的内存区域地址,当无法知道内存具体位置的时候,想要绑定真正的内 ...
- 解决UITextView滚动后无法显示完整内容
滚动UITextView,偶尔内容只显示一半,现象如下
- 构建Oracle的Docker镜像
说明:本次构建环境,Centos7.7,Oracle12.2.0.1,Docker19 注意:已安装好docker的,请检查docker版本,1.13以下版本要升级: # df -h 命令检查根目录的 ...
- 【shell基础】
Ctrl+R 搜索之前的命令 Ctrl+D 退出 Ctrl+A 移动到行首 Ctrl+E 移动到行尾 Ctrl+U 删除光标前的内容 Ctrl+K 删除光标后的内容 Ctrl+S 锁频 Ctrl+Q ...
- 1)PHP,数据库操作类网址
(1)脚本之家 http://www.jb51.net/article/94347.htm (2)一个博客 http://www.cnblogs.com/lvchenfeng/p/5003629.ht ...
- CPU内核、用户模式
本文由是阅读该文章做下的笔记. CPU分内核与用户模式. 三言蔽之 内核模式下,应用可以直接存取内存,能够执行任何CPU指令.一般来说驱动运行在该模式下.内核模式的应用一旦崩溃,整个操作系统都会崩溃. ...
- Linux挂载存储(供应商给的资料)
infofile iqn.1994-05.com.redhat:16a2b8b7d8 infodb iqn.1994-05.com.redhat:8518efa2fe72 在iscsi server上 ...