react（27）——diff算法；key有什么作用，为什么遍历列表时，key最好不要用index；
发布时间
阅读量：
阅读量
1.虚拟DOM中key的作用
新数据
新数据
新虚拟DOM
新数据
如果虚拟DOM中发现了与新虚拟DOM一致的key，则对比其具体内容；
若具体内容无变化，则可直接采用之前的实际DOM；
当具体内容发生变化时，则需生成一个新的实际DOM，并将其取代页面中原有的实际DOM。
如果虚拟DOM中未发现与新虚拟DOM相同的key，则无需另设真实DOM即可渲染到页面
2.用index(数组的索引)作为key可能会引发的问题：
- 如果在操作过程中对数据进行逆序添加或删除等破坏顺序的操作，则可能导致不必要的DOM更新。这种情况下虽然不会影响用户体验（界面效果没问题），但性能优化空间有限。
- 如果在结构中存在输入类的DOM元素，则可能会导致界面显示异常。
- 即使避免了所有可能导致性能问题的操作（如逆序添加或删除），当仅用于展示列表时使用索引作为键也不会出现问题。
3.开发中如何选择key
通常建议使用每条数据的唯一标识来作为键。如果确定是简单的展示数据的话，也可以使用索引。
4.案例代码
<body>
<div id="test"></div>
<script type="text/babel">
"use strict";
class Person extends React.Component {
state = {
persons: [
{ id: 1, name: "小李", age: 18 },
{ id: 2, name: "小张", age: 20 },
],
};
addXiaoWang = () => {
let { persons } = this.state;
persons = [{ id: 3, name: "小王", age: 30 }, ...persons];
this.setState({ persons });
};
render() {
return (
<div>
<h2>展示人员信息</h2>
<button onClick={this.addXiaoWang}>添加一个小王</button>
<hr />
<hr />
<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 />
<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>5.运行结果
初始界面
填写数据后界面
添加小王界面
全部评论 (0)
还没有任何评论哟~