Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

The react of virtual DOM diffing algorithm (DOM)

Xiao Xiao Chong Duck 2022-08-15 17:13:40 阅读数:1 评论数:0 点赞数:0 收藏数:0

  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.Development should be how to choosekey
    1. 最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一值
    2. 如果确定只是简单的展示数据,用index也是可以的
    

例:分别使用index和id作为key

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'))

效果:
在这里插入图片描述

Copyright statement
In this paper,the author:[Xiao Xiao Chong Duck],Reprint please bring the original link, thank you

支付宝红包,每日可领(支付宝免费1-2元支付红包)