• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

1)简单来说:key是虚拟DOM对象的标识,它对更新显示起着极其重要的作用。

2)详细来说,当状态中的数据发生变化时,react会根据“新数据”生成一个“新的虚拟DOM”,然后React会创建一个“新的虚拟DOM”

与“旧虚拟DOM”的Diff相比,比较规则如下

A.在旧虚拟DOM中找到与新虚拟DOM相同的键:

(1)如果虚拟DOM内容没有变化,直接使用之前的真实DOM。

(2)如果虚拟DOM中的内容发生变化,则生成新的真实DOM,然后替换页面中先前的真实DOM。

B.在旧虚拟DOM中找不到与新虚拟DOM相同的键。

从数据中创建一个新的真实DOM,然后将其呈现到页面上。

使用索引作为关键字可能导致的问题

1.如果以相反的顺序添加或删除数据,将会产生不必要的真实DOM更新。界面效果还好,但是效率低。

2.如果输入类的DOM包含在组织中:将会出现错误。DOM update==& gt接口有问题。

3.注意,如果没有添加、删除、改变逆序等破坏数据顺序的操作,只用于渲染列表显示,使用index作为key没有问题。

如何在开发中选择密钥

1.最好使用每条数据的唯一标识符作为密钥,如id、手机号、学号等唯一值。

2.如果确定只是简单的显示数据,也可以使用index。

类应用程序扩展React。组件{

州={

persons: [

{ id: 1,姓名: '王',年龄: 18 },

{ id: 2,姓名:‘向’,年龄: 19 }

]

}

add=()={

const p={ id : this . state . persons . length 1,name: 'di ',age: 20 }

this.setState({

persons: [p,这个.状态.人]

})

}

render() {

返回(

差异

H2显示个人信息/h2

Button onClick={this.add}添加新人员/按钮

使用索引作为键/h3。

保险商实验所

{

this . state . persons . map((person obj,index)={

return Li key={ index } { person obj . name }-{ person obj . age } input type=' text '//Li

})

}

/ul

H2显示个人信息/h2

使用h3 id作为密钥/h3

保险商实验所

{

this . state . persons . map((person obj)={

return Li key={ person obj . id } { person obj . name }-{ person obj . age } input type=' text '//Li

})

}

/ul

/div

)

}

}

ReactDOM.render(App /,document . getelementbyid(' root ');

hkneq5sl5ji5197.png

Link to comment
Share on other sites