Detailed explanation of the list rendering example of React learning notes

Preface

This article mainly introduces relevant content about React list rendering, and shares it for your reference and learning. I won’t say much below, let’s take a look at the detailed introduction together.

Example details:

List rendering is also very simple. Use the map method to return a new rendering list, for example:

const numbers = [1, 2, 3, 4, 5]; 
const listItems = ((number) => 
 <li>{number}</li>
);
( 
 <ul>{listItems}</ul>,
 ('root')
);

In the construction of the basic list component, there is an important attribute value key that needs to be specified. This is very important and is related to helping the framework to optimize performance. We will continue to understand the specific reasons later. Let’s take a look at the example first:

function NumberList(props) { 
 const numbers = ;
 const listItems = ((number) =>
 <li key={()}>
  {number}
 </li>
 );
 return (
 <ul>{listItems}</ul>
 );
}

const numbers = [1, 2, 3, 4, 5]; 
( 
 <NumberList numbers={numbers} />,
 ('root')
);

It should be noted that the key specification needs to be unique, because it can help the framework better identify column changes, additions and deletion. If there is a stable unique key value, use a unique key value. If there is no index, it can be used for identification. However, it is not recommended to use index when the list is frequently sorted, because this will degrade performance.

For example:

const todoItems = ((todo) => 
 <li key={}>
 {}
 </li>
);
const todoItems = ((todo, index) => 
 // Only do this if items have no stable IDs
 <li key={index}>
 {}
 </li>
);

In addition to using map to construct the list above, the map syntax can also be embedded in the jsx syntax. Just add {}, and there are many ways to write it. You can choose one that you like, haha.

For example, the following two writing methods are the same:

function NumberList(props) { 
 const numbers = ;
 const listItems = ((number) =>
 <ListItem key={()}
    value={number} />
 );
 return (
 <ul>
  {listItems}
 </ul>
 );
}

function NumberList(props) { 
 const numbers = ;
 return (
 <ul>
  {((number) =>
  <ListItem key={()}
     value={number} />
  )}
 </ul>
 );
}

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.