Reactの仮想DOMのキー
古典的なインタビューの質問
1. Reactの仮想DOMのキーの機能は何ですか？（キーの内部原則は何ですか？）
2。リストをトラバースするときに、キーにインデックスを使用しない方がよいのはなぜですか？
次に、仮想DOMでのキーの役割
状態が変化すると、Reactは[新しいデータ]に基づいて[新しい仮想DOM]を生成し、Reactはdiffアルゴリズムを使用して[新しい仮想DOM]と[古い仮想DOM]を比較します。ルール
1.[古い仮想DOM]DOM]找到了と[新しい仮想DOM]と同じキー：a
。仮想DOMのコンテンツの場合は没变、以前の実際のDOMを直接使用します
。b。变了仮想DOMのコンテンツの場合、新しい実際のDOMを生成し、ページ2の以前の実際のDOMを置き換えます。[古い仮想DOM]の[新しい仮想DOM]
と同じキー： データに基づいて新しい実際のDOMを作成し、それをにレンダリングします。ページ未找到
3.インデックスをキーとして使用することによって引き起こされる可能性のある問題
1.逆順での追加、逆順での削除などでデータが破壊された場合、不要なリアルDOMアップデートが発生します==>ページ効果は問題ありませんが、効率は低くなります。
2.入力クラス（入力など）のDOMが構造に含まれている場合、誤ったDOM更新が発生します==>ページに問題があります
3.注意！データを逆順に追加したり削除したりするなどの順序を破る操作がなく、リストのレンダリングにのみ使用される場合は、インデックスをキーとして使用しても問題はありません。
コードケース1：インデックスをキーとして使用すると、逆の順序で追加するという要件が実現されます。ページには問題はありませんが、効率は低くなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例1-无输入类</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable，将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
// 1.创建类式组件
class Demo extends React.Component {
state = {
person: [{
id: 1, name: '小张' }, {
id: 2, name: '小李' }] }
add = () => {
let {
person } = this.state;
let obj = {
id: 3,
name: '小王'
}
//逆序添加
person.unshift(obj);
this.setState({
person: person });
}
//render放在类的原型对象上
render() {
const {
person } = this.state;
return (
<div>
<h1>案例1-无输入类</h1>
<button onClick={
this.add}>逆序添加</button>
<ul>
{
person.map((item, index) => {
return <li key={
index}>{
item.id}{
item.name}</li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(<Demo id="id属性" />, document.querySelector('#test'));
</script>
</body>
</html>
コードケース2：インデックスがキーとして使用されている場合、入力クラスDOMを含む構造に逆の順序で追加する必要があります-ページに問題があります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例2-有输入类</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable，将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
// 1.创建类式组件
class Demo extends React.Component {
state = {
person: [{
id: 1, name: '小张' }, {
id: 2, name: '小李' }] }
add = () => {
let {
person } = this.state;
let obj = {
id: 3,
name: '小王'
}
//逆序添加
person.unshift(obj);
this.setState({
person: person });
}
//render放在类的原型对象上
render() {
const {
person } = this.state;
return (
<div>
<h1>案例2-有输入类</h1>
<button onClick={
this.add}>逆序添加</button>
<ul>
{
person.map((item, index) => {
return <li key={
index}>{
item.id}{
item.name} <input type="text"/></li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(<Demo id="id属性" />, document.querySelector('#test'));
</script>
</body>
</html>
输入框发生错乱，所以这里key肯定是要使用唯一标识
第四に、開発でキーを選択する方法
1、最好使用每条数据的唯一标识作为key，比如id、手机号、身份证、学号等
2、如果确定只是简单的展示数据，用index也是可以的。
上記は、 Reactの仮想DOMのキーの内容です。「 ReactFamilyBucket」列に注意してください。
私の通常のプロジェクトに共通する問題と筆記試験の知識を共有し、CSDNであなたと面接し、一緒に進歩します。さあ。