3.10. React list & Keys

发布时间 ： 2025-10-25 13:34:30 UTC      

Page Views: 29 views

We can use JavaScript’s map() method to create a list.

3.10.1. React instance

Use map() method traverses the array to generate a list of numbers 1 to 5:

constnumbers=[1,2,3,4,5];constlistItems=numbers.map((numbers)=>
<li>{numbers}li>);ReactDOM.render(<ul>{listItems}ul>,document.getElementById('example'));
   
 We can reconstruct the above instance into a component that receives array parameters and assigns one for each list element   key   otherwise, there will be a warning   a   key   should   be   provided   for   list   items   which means it needs to be included   key   : 
 
 
 React instance  
 
 
 
functionNumberList(props){constnumbers=props.numbers;constlistItems=numbers.map((number)=>
<likey={number.toString()}>{number}li>);return(<ul>{listItems}ul>);}constnumbers=[1,2,3,4,5];ReactDOM.render(<NumberListnumbers={numbers}/>,document.getElementById('example'));
     
 
  3.10.2.  Keys  
 
   Keys   can help when some elements in the DOM are added or deleted   React   identify which elements have changed. So you should assign a definite identity to each element in the array. 
 
 
 
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  li>
);
   
 Of an element   key   is preferable that this element has a unique string in the list. Usually, we use the   id   as an element   key   : 
 
 
 
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  li>
);
   
 When the element is not determined   id   can use his serial number index   index   as   key   : 
 
 
 
const todoItems = todos.map((todo, index) =>
  // Only used when there is no definite ID
  <li key={index}>
    {todo.text}
  li>
);
   
 If the list can be reordered, we do not recommend using an index for sorting, as this can cause rendering to become slow. 
  
 
  3.10.3.  Extract components with keys  
 
 Of the element   key   it only makes sense when it is compared to its sibling node. 
 
 For example, if you extract a   ListItem   components, you should put   key   the one saved in the array      element, not on the   ListItem   in the component   
  •    on the element.   
     
      3.10.4.  A false demonstration.  
     
     
     
    function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! You don't need to specify a key here:
    
  • 
      {value}
    
    • 
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //Wrong! The key of the element should be specified here：
    
  );
  return (
    
      
      {listItems}
    
    
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('example')
);
    
     
      3.10.5.  The correct use of key  
     
     
     React instance  
     
     
     
    functionListItem(props){//By the way! There is no need to specify a key here:
return
  • {props.value}
    • ;}functionNumberList(props)
{constnumbers=props.numbers;constlistItems=numbers.map((number)=>
//That's right again! The key should be specified in the context of the array
);return(
      {listItems}
    );}
constnumbers=[1,2,3,4,5];ReactDOM.render(,
document.getElementById('example'));
   
     When you are in   map()   method, you’d better always remember to add a unique   key   . 
       
     
      3.10.6.  Of the element   key   among his brother elements, it should be unique.  
     
     Used in array elements   key   should be unique among his brothers. However, they do not need to be globally unique. When we generate two different arrays, we can use the same key. 
     
     
     React instance  
     
     
     
    functionBlog(props){constsidebar=(