反应动态列表中的键

Question

This is from the Facebook documentation:

When a list is rerendered, React takes each element in the new version and looks for one with a matching key in the previous list. When a key is added to the set, a component is created; when a key is removed, a component is destroyed. Keys tell React about the identity of each component, so that it can maintain the state across rerenders. If you change the key of a component, it will be completely destroyed and recreated with a new state.

It's strongly recommended that you assign proper keys whenever you build dynamic lists. If you don't have an appropriate key handy, you may want to consider restructuring your data so that you do.

If you don't specify any key, React will warn you and fall back to using the array index as a key – which is not the correct choice if you ever reorder elements in the list or add/remove items anywhere but the bottom of the list. Explicitly passing key={i} silences the warning but has the same problem so isn't recommended in most cases.

Component keys don't need to be globally unique, only unique relative to the immediate siblings.

I don't get it. If we don't supply keys in a list like this:

return (
        <li>
          <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
        </li>
      );

What is the problem? If the list had 3 elements and the keys were [0,1,2] and we removed 1 , what would happen?

Answer 1

Each list needs a key for only React to use; like this <li key={item.uniqueId}> where the uniqueId of the item is unique in the group of items. So when you modify this list React knows how to deal with the modification. This key is different from the index/positioning of a single item in a list.

When you create a list using a map like so you'll do something like this:

return (
    <ul>
       {this.props.items.map(item => <ItemComponent key={item.id} {...item} />)}
    </ul>
)

In the documentation you posted above you could use the item's index (ie, (index, i) => <ItemComponent key={i} ) but it's not recommended.

In the ItemComponent list component:

return (
  <li>
    {/* your code here */}
  </li>
)

Or using your example you could do it like this:

return (
  <li key={this.props.uniqueId}>
    <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
  </li>
);

Any time you move, delete or add items to this list React will know how to render it.