React key的作用和用法 – ReactJS实战教程 reactkey|React

上一章ReactJS实战教程请查看：React使用列表和map()函数
key是唯一的标识符。在React中，它用于识别哪些项已从列表中更改、更新或删除。它在动态创建组件或用户更改列表时非常有用。它还有助于确定需要重新渲染集合中的哪些组件，而不是每次都重新渲染整个组件集。
应该在数组中提供key，以使元素具有稳定的标识，选择key作为惟一标识列表中项的字符串的最佳方法。它可以通过下面的例子来理解。
例子

const stringLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ]; const updatedLists = stringLists.map((strList)=>{ < li key={strList.id}> {strList} < /li>; });

【React key的作用和用法 – ReactJS实战教程】如果渲染的项没有稳定的id，可以将项索引作为key分配给列表。它可以在下面的示例中显示。
例子

const stringLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ]; const updatedLists = stringLists.map((strList, index)=>{ < li key={index}> {strList} < /li>; });

注意：如果key的顺序将来可能改变，不建议使用索引。它会给开发人员带来混乱，并可能导致组件状态的问题。
在组件中使用key假设你已经为ListItem创建了一个单独的组件，并从该组件中提取了ListItem。在这种情况下，你应该为数组中的< ListItem />元素分配key，而不是为ListItem本身中的< li>元素分配key。为了避免错误，你必须记住，你只在周围数组的上下文中有意义。因此，建议为从map()函数返回的任何内容分配一个key。
示例：不正确的key使用

import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { const item = props.item; return ( // 错误，不需要指定key. < li key={item.toString()}> {item} < /li> ); } function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((strLists) => // 这里应该已经指定了key < ListItem item={strLists} /> ); return ( < div> < h2>不正确的key使用例子< /h2> < ol>{listItems}< /ol> < /div> ); } const myLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ]; ReactDOM.render( < NameList myLists={myLists}/>, document.getElementById('app') ); export default App;

在给定的示例中，列表被成功渲染，但是，我们没有为map()迭代器分配一个key，这不是一个好的实践。
示例：正确使用key
要纠正上面的示例，我们应该将key分配给map()迭代器。

import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { const item = props.item; return ( // 这里不需要指定key. < li> {item} < /li> ); } function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((strLists) => // 这里应该制定key. < ListItem key={myLists.toString()} item={strLists} /> ); return ( < div> < h2>正确key使用例子< /h2> < ol>{listItems}< /ol> < /div> ); } const myLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ]; ReactDOM.render( < NameList myLists={myLists}/>, document.getElementById('app') ); export default App;

兄弟key之间的唯一性我们已经讨论过数组中的key分配在它们的兄弟姐妹之间必须是唯一的。但是，这并不意味着key应该是全局惟一的。我们可以使用相同的一组key来生成两个不同的数组。在下面的例子中可以理解。
例子

import React from 'react'; import ReactDOM from 'react-dom'; function MenuBlog(props) { const titlebar = ( < ol> {props.data.map((show) => < li key={show.id}> {show.title} < /li> )} < /ol> ); const content = props.data.map((show) => < div key={show.id}> < h3>{show.title}: {show.content}< /h3> < /div> ); return ( < div> {titlebar} < hr /> {content} < /div> ); } const data = http://www.srcmini.com/[ {id: 1, title:'First', content: 'Welcome to srcmini!!'}, {id: 2, title: 'Second', content: 'ReactJS实战教程!!'}, {id: 3, title: 'Third', content: 'ReactJS面试题!!'} ]; ReactDOM.render( < MenuBlog data=http://www.srcmini.com/{data} />, document.getElementById('app') ); export default App;