一、虚拟 DOM 中 key 的作用
react/vue 中的 key 有什么作用?key的内部原理是什么?
简单来说:
key 是虚拟 DOM 对象的标识,在更新显示时 key 起着极其重要的作用,提高渲染效率,防止渲染错误。
详细的说:
当状态中的数据发生变化时,React 会根据【新数据】生成【新的虚拟DOM】
随后 React 进行【新虚拟DOM】与【旧虚拟DOM】的 diff 比较,比较规则如下:
1、【旧虚拟DOM】中找到了与【新虚拟DOM】相同的 key:
若虚拟 DOM 中内容没变,直接使用之前的真实 DOM
若虚拟 DOM 中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实 DOM
2、旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实 DOM,随后渲染到到页面
“就地复用” 策略:
当数据项的顺序发生改变时,他不会移动页面上的 DOM 元素匹配数据项顺序的改变,而是简单的复用此处的元素
如果绑定了 key 属性,就可对当前 DOM 元素进行唯一标识,在进行数据更新渲染时,会基于 key 的变化重新排列 DOM 元素的顺序
二、用 index 作为 key 可能会引发的问题
界面效果没问题, 但效率低:
若对数据进行,逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实 DOM 更新
慢动作回放----使用 index 索引值作为 key
根据 diffing 算法规则,所有 DOM 元素都需要都需要重生成新的真实 DOM:
存在相同key 0 和 1,但虚拟 DOM内容改成了,需要生成新的真实 DOM;
新增key2,需要生成新的真实 DOM。
初始数据:
{ id: 1, name: '小张', age: 18 },
{ id: 2, name: '小李', age: 19 }
初始的虚拟 DOM:
<li key=0>小张---18</li>
<li key=1>小李---19</li>
更新后的数据:
{ id: 3, name: '小王', age: 20 },
{ id: 1, name: '小张', age: 18 },
{ id: 2, name: '小李', age: 19 }
更新数据后的虚拟 DOM:
<li key=0>小王---20</li>
<li key=1>小张---18</li>
<li key=2>小李---19</li>
界面有问题:
如果结构中还包含输入类的 DOM,会产生错误 DOM 更新
慢动作回放----使用 index 索引值作为 key (界面有问题)
根据 diffing 算法规则,内部 input “就地复用”策略顺序会错乱
初始数据:
{ id: 1, name: '小张', age: 18 },
{ id: 2, name: '小李', age: 19 }
初始的虚拟 DOM:
<li key=0>小张---18<input type="text"/></li>
<li key=1>小李---19<input type="text"/></li>
更新后的数据:
{ id: 3, name: '小王', age: 20 },
{ id: 1, name: '小张', age: 18 },
{ id: 2, name: '小李', age: 19 }
更新数据后的虚拟 DOM:
<li key=0>小王---20<input type="text"/></li>
<li key=1>小张---18<input type="text"/></li>
<li key=2>小李---19<input type="text"/></li>
注意:
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用 index 作为 key 是没有问题的。
三、开发中如何选择key?
1、最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。文章来源:https://www.toymoban.com/news/detail-724591.html
2、如果确定只是简单的展示数据,用 index 也是可以的。文章来源地址https://www.toymoban.com/news/detail-724591.html
四、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>key的作用</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
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'))
</script>
</body>
</html>
到了这里,关于【10】基础知识:React - DOM的diffing算法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!