深圳建网站的公,西安seo搜推宝,网站建设开源节流,飘雪影视在线观看免费观看西瓜React使用Diff算法来比较虚拟DOM树和真实DOM树之间的差异#xff0c;并仅更新必要的部分#xff0c;以提高性能。key的作用是在Diff算法中帮助React确定哪些节点已更改#xff0c;哪些节点已添加或删除。
我们以案例来说明。
使用索引值和唯一ID作为key的效果
1、使用索引…React使用Diff算法来比较虚拟DOM树和真实DOM树之间的差异并仅更新必要的部分以提高性能。key的作用是在Diff算法中帮助React确定哪些节点已更改哪些节点已添加或删除。
我们以案例来说明。
使用索引值和唯一ID作为key的效果
1、使用索引值作为key
class Person extends React.Component {state {persons: [{id:1,name:张三,age: 20},{id:2,name:李四,age: 21},]}// 增加人员addPerson () {let {persons} this.stateconst user {id:persons.length 1,name:王麻子,age:22}persons [user,...persons]this.setState({persons})}render(){const {persons} this.statereturn (divh1验证diff算法/h1button onClick{this.addPerson}增加人员/button{persons.map((val,idx) {const info 姓名val.name 年龄 val.ageconsole.log(idx,info)return (div key{idx}{info}/div)})}/div)}}// 2、将虚拟DOM渲染到页面标签必须闭合ReactDOM.render(Person/, document.getElementById(app))以上代码我们使用的是索引值idx来作为标签的key值渲染到页面当我点击【增加人员】的按钮时会在persons的状态值里面最前方插入一个新的人员信息然后react在render到页面中去。其页面效果如下 2、使用id作为key值 class Person extends React.Component {state {persons: [{id:1,name:张三,age: 20},{id:2,name:李四,age: 21},]}// 增加人员addPerson () {let {persons} this.stateconst user {id:persons.length 1,name:王麻子,age:22}persons [user,...persons]this.setState({persons})}render(){const {persons} this.statereturn (divh1验证diff算法/h1button onClick{this.addPerson}增加人员/button{persons.map((val,idx) {const info 姓名val.name 年龄 val.ageconsole.log(idx,info)return (div key{val.id}{info}/div)})}/div)}}// 2、将虚拟DOM渲染到页面标签必须闭合ReactDOM.render(Person/, document.getElementById(app))以上代码我们使用id来作为标签的key值但是这里的效果和我们看到的是一样的但是在react中处理的方式是不一样的后续我们继续讨论。 使用索引值和唯一ID作为key的区别
我们对以上案例做一下修改我们增加一个输入框在看看其效果。
1、使用索引值作为key
class Person extends React.Component {state {persons: [{id:1,name:张三,age: 20},{id:2,name:李四,age: 21},]}// 增加人员addPerson () {let {persons} this.stateconst user {id:persons.length 1,name:王麻子,age:22}persons [user,...persons]this.setState({persons})}render(){const {persons} this.statereturn (divh1验证diff算法/h1button onClick{this.addPerson}增加人员/button{persons.map((val,idx) {const info 姓名val.name 年龄 val.ageconsole.log(idx,info)return (div key{idx}{info} input defaultValue{info} typetext//div)})}/div)}}// 2、将虚拟DOM渲染到页面标签必须闭合ReactDOM.render(Person/, document.getElementById(app))直接看效果 姓名王麻子年龄22 ----输入框姓名张三年龄20
姓名张三年龄20 ----输入框姓名李四年龄21
姓名李四年龄21 ----输入框姓名李四年龄21在以上效果图上我们发现了严重的错误输入框的内容与其人员信息不一致这是为什么呢
2、使用ID作为key class Person extends React.Component {state {persons: [{id:1,name:张三,age: 20},{id:2,name:李四,age: 21},]}// 增加人员addPerson () {let {persons} this.stateconst user {id:persons.length 1,name:王麻子,age:22}persons [user,...persons]this.setState({persons})}render(){const {persons} this.statereturn (divh1验证diff算法/h1button onClick{this.addPerson}增加人员/button{persons.map((val,idx) {const info 姓名val.name 年龄 val.ageconsole.log(idx,info)return (div key{val.id}{info} input defaultValue{info} typetext//div)})}/div)}}// 2、将虚拟DOM渲染到页面标签必须闭合ReactDOM.render(Person/, document.getElementById(app))直接看效果 姓名王麻子年龄22 ----输入框姓名王麻子年龄22
姓名张三年龄20 ----输入框姓名张三年龄20
姓名李四年龄21 ----输入框姓名李四年龄21在以上效果图上我们发现了人员信息与输入框的信息一致并没有发生什么错误这是为什么呢 分析索引值与ID值作为key的原理
分析key值是索引值时的流程 根据上图我们可以知道使用索引值作为key的时候三条数据基本上都要生成新的DOM而输入框的值因为与旧的虚拟DOM比较内容一致导致与新的数据不一致的结果。
分析key值是ID值的流程 根据上图我们可以知道使用唯一ID作为key值时比较第一条数据时key值就不存在需要生成新的虚拟DOM而后面两条的key值与旧的虚拟DOM一致可以复用旧的真实DOM且不需要生成新的DOM减少成本这样使得性能更好。 小总结
结果案例演示我们知道为什么遍历列表时key最好不要用index而是使用唯一标识以此来减少成本提高性能。
虚拟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随后渲染到到页面
用index作为key可能会引发的问题
1、若对数据进行逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 界面效果没问题, 但效率低。
2、如果结构中还包含输入类的DOM 会产生错误DOM更新 界面有问题。
3、注意如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示使用index作为key是没有问题的。
开发中如何选择key?
1、最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2、如果确定只是简单的展示数据用index也是可以的。
