【React】第七部分 Dom的diffing算法
7. Dom的diffing算法
7.1 虚拟DOM中key的作用
简单来说:key是虚拟DOM对象的标识,比较的时候通过key去查找对应的虚拟DOM
详细来说:当状态中的数据发生变化的时候,react会根据新数据生成的新的虚拟DOM,随后进行新旧虚拟DOM的diffing比较,比较的规则如下:
(1)旧的虚拟DOM找到与新的虚拟DOM相同的key:
- 如果虚拟DOM的内容没变,直接使用之前的真实DOM
- 如果虚拟DOM的内容发生变化,则生成新的真实DOM,去替换页面中之前的真实DOM
(2)旧的虚拟DOM没有找到与新的虚拟DOM相同的key:
- 则会根据数据创建新的真实DOM,随后渲染到页面上
7.2 用index作为key可能会引发的问题
-
如果对数据进行:逆序添加、逆序删除等破坏顺序的操作,那么就会导致产生没有必要的真实DOM更新,效率低下
-
如果结构中包含输入类的DOM,会产生错误的DOM更新,界面会出现问题
-
这里需要说明,不是说不可以使用index作为key,如果开发者知道此处不存在对数据的逆序添加、逆序删除等破坏顺序的操作,就可以使用index
-
在开发的过程中最好使用能够唯一标识的id作为key,例如身份证、学号、手机号等等
下面分别举例子
index作为key值
从图中很容易就看到,后添加的数据打乱了index顺序并且导致了input框中的数据不能一一对应,也被打乱了
class Demo extends React.Component{
state = {
personArr:[
{id:0,name:'Jack',age:25},
{id:1,name:'Mark',age:23},
{id:2,name:'LiHua',age:20},
]
}
addPerson = () =>{
this.setState({personArr:[{id:3,name:'Jane',age:50},...this.state.personArr]})
}
render(){
return (
<div>
<ul>
{
this.state.personArr.map((item,index)=>{
return <li key={index}>
name: {item.name} -- age: {item.age} -- index: {index}
<input type="text"/>
</li>
})
}
</ul>
<button onClick={this.addPerson}>点击添加人员</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('box'))
id作为key值
class Demo extends React.Component{
state = {
personArr:[
{id:0,name:'Jack',age:25},
{id:1,name:'Mark',age:23},
{id:2,name:'LiHua',age:20},
]
}
addPerson = () =>{
this.setState({personArr:[{id:3,name:'Jane',age:50},...this.state.personArr]})
}
render(){
return (
<div>
<ul>
{
this.state.personArr.map((item,index)=>{
return <li key={item.id}>
name: {item.name} -- age: {item.age} -- id: {item.id}
<input type="text"/>
</li>
})
}
</ul>
<button onClick={this.addPerson}>点击添加人员</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('box'))
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!