React learning-Special properties in the list loop key

I. The role of key
1. Key help react determine which item in the list has been changed, added, or deleted.
2. Facilitates virtual DOM rendering and performance improvements after DOM changes, comparing the new and old DOM specific item changes
Second, the use of key precautions
1. Using an array subscript for key is not recommended and will degrade rendering performance if an array sort is encountered.

Const TODOITEMS = Todos.map (TODO, index) =
  //Only consider using array subscript <li If no ID is used
  key={index}>
    { Todo.text}
  </li>
);

2. Keys in an array are unique in their siblings, but are not necessarily unique in the global.

function Blog (props) {
  Const Sidebar = (
    <ul>
      {props.posts.map (POST) =
        <li key={post.id }>
          {post.title}
        </li>
      )}
    </ul>
  );
  Const CONTENT = Props.posts.map (POST) =
    <div key={post.id}>
      
 
The value of 3.key cannot be passed to the subassembly, and for the same data to be passed, a different name can be used as the property name. Accessing the value of key will return undefined

const content = Posts.map ((POST) = <post key={post.id} id={post.id} title={p Ost.title}/>);