08. React - seznamy a klíče

Vzhledem k níže uvedenému kódu používáme funkci map(), abychom získali pole numbers a zdvojnásobili jejich hodnoty. Přidáme nové pole vrácené pomocí map() do proměnné doubled a přihlásíme ji:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

Tento kód se zobrazí v konzoly: [2, 4, 6, 8, 10].

V Reactu je přeměna polí na seznam prvků téměř identická.

Vytváření více komponent

Můžete vytvářet kolekce prvků a zahrnout je do JSX pomocí složených závorek {}.

Níže, budeme procházet pole numbers pomocí funkce JavaScript map(). Vracíme prvek < li > pro každou položku. Nakonec přidělíme výslednou skupinu prvků listItems:

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

Zahrneme celé pole listItems do 

 prvku a vykreslíme ho do DOM :

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

Tento kód zobrazuje seznam čísel od 1 do 5.

Základní seznam komponenty

Obvykle byste vykreslovali seznamy uvnitř komponenty.

Můžeme předcházející příklad převést na komponentu, který přijímá pole numbers a zobrazí seznam prvků.

GitHub

Když spustíte tento kód, dostanete upozornění, že by měl být k dispozici klíč pro položky seznamu. "Key" je speciální atribut řetězce, který musíte zahrnout při vytváření seznamů prvků. Budeme diskutovat o tom, proč je to důležité v další části.

Přidejte key do seznamu naše položky numbers.map() a opravte chybějící klíčový problém.

GitHub

Klíče

Klíče pomáhají Reactu identifikovat, které položky se změnily, byly přidány nebo byly odstraněny. Klíče by měly být dány prvkům uvnitř pole, aby prvky získaly stabilní identitu:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Nejlepší způsob, jak vybrat klíč, je použít řetězec, který jednoznačně identifikuje položku seznamu mezi sourozenci. Nejčastěji byste používali ID z vašich dat jako klíčů:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Pokud nemáte stávající ID pro vykreslené položky, můžete použít index jako klíč jako poslední možnost:

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

Nedoporučujeme používat indexy klíčů, pokud se může změnit pořadí položek. To může negativně ovlivnit výkon a může způsobit problémy se stavem komponenty. Podívejte se na článek Robina Pokorného o důkladném vysvětlení negativních dopadů používání indexu jako klíče. Pokud nechcete přiřadit explicitní klíč položkám seznamu, React bude používat výchozí indexy jako klíče.

Zde je důkladné vysvětlení, proč jsou klíče nezbytné, pokud máte zájem o další učení.

Extrahování Komponent s Klíči

Klíče mají smysl pouze v kontextu okolního pole.

Například, pokud chcete extrahovat z komponenty ListItem, měli byste mít klíč na < ListItem / > prvky v poli, nikoli na < li > prvku v ListItem.

Příklad: Nesprávné použití klíče

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

Příklad: Správné použití klíče

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

Dobrým pravidlem je, že prvky uvnitř map() vyžadují klíče volání.

Klíče musí být jedinečné

Klíče používané v poli by měly být mezi svými unikátní. Nicméně nemusí být globálně jedinečné. Při vytváření dvou různých polí můžeme použít stejné klíče:

GitHub

Klíče slouží jako pomoc pro React, ale nejsou předávány vašim komponentám. Pokud v komponentě potřebujete stejnou hodnotu, předávejte ji explicitně jako prvek s jiným názvem:

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

S výše uvedeným příkladem může komponenta Post číst props.id, ale ne props.key.

Vkládání map() do JSX

V uvedených příkladech jsme deklarovali samostatnou proměnnou listItems a zahrnuli ji do JSX:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX umožňuje vkládání libovolného výrazu do složených závorek, abychom mohli map() výsledek vložit:

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

      )}
    </ul>
  );
}

Někdy to vede k jasnějšímu kódu, ale tento styl může také být zneužit. Stejně jako v jazyce JavaScript je na vás, abyste rozhodli, zda je vhodné vyndat proměnnou pro čitelnost. Mějte na paměti, že pokud je map() tělo příliš vnořené, může být vhodný čas pro extrakci komponenty .