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

上一章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>;   
});   

如果渲染的项没有稳定的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 = [  
  {id: 1, title: 'First', content: 'Welcome to srcmini!!'},  
  {id: 2, title: 'Second', content: 'ReactJS实战教程!!'},  
  {id: 3, title: 'Third', content: 'ReactJS面试题!!'}  
];  
ReactDOM.render(  
  <MenuBlog data={data} />,  
  document.getElementById('app')  
);  
export default App;