ReactJS | Ключи

Опубликовано: 7 Августа, 2021

В предыдущей статье о ReactJS | Списки, мы обсудили ключи, а также рассказали, зачем они нужны при создании списков. Мы продолжим обсуждение дальше в этой статье.

«Ключ» - это специальный строковый атрибут, который необходимо включить при создании списков элементов в React. Ключи используются для React, чтобы определить, какие элементы в списке изменены, обновлены или удалены. Другими словами, мы можем сказать, что ключи используются для идентификации элементов в списках. Следующее, что приходит в голову, это то, что должно быть выбрано в качестве ключевого для элементов в списках. Рекомендуется использовать строку в качестве ключа, который однозначно идентифицирует элементы в списке. В примере ниже показан список со строковыми ключами:

Javascript

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

Вы также можете назначить индексы массива как ключи к элементам списка. В приведенном ниже примере индексы массива назначаются в качестве ключей для элементов.

Javascript

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

Назначение индексов в качестве ключей крайне не рекомендуется, потому что, если элементы массивов будут переупорядочены в будущем, это запутает разработчика, поскольку ключи для элементов также изменятся.

Использование ключей с компонентами

Рассмотрим ситуацию, когда вы создали отдельный компонент для элементов списка и извлекаете элементы списка из этого компонента. В этом случае вам нужно будет назначить ключи компоненту, который вы возвращаете из итератора, а не элементам списка. То есть вы должны назначать ключи <Component />, а не <li>. Чтобы избежать ошибок, следует помнить, что все, что вы возвращаете изнутри функции map (), должно быть назначено ключом.

Код ниже показывает неправильное использование ключей:

Javascript

 import React from 'react' ;
 import ReactDOM from 'react-dom' ;
 
// Component to be extracted
 function MenuItems(props)
 {
    const item = props.item;
 
        return (
            <li>
                {item}
            </li>
        );
 }
  
// Component that will return an
 // unordered list
 function Navmenu(props)
 {
        const list = props.menuitems;
 
    const updatedList = list.map((listItems)=>{
            return (
                 
        );
    });
  
    return (
        <ul>{updatedList}</ul>);
 }
  
const menuItems = [1, 2, 3, 4, 5];
  
ReactDOM.render(
    ,
    document.getElementById( 'root' )
 );

Выход:

Вы можете видеть в приведенном выше выводе, что список успешно отрисован, но на консоль выдается предупреждение о том, что элементам внутри итератора не назначены ключи . Это потому, что мы не присвоили ключ элементам, которые возвращаем в итератор map ().

Ниже показан пример правильного использования ключей:

Javascript

 import React from 'react' ;
 import ReactDOM from 'react-dom' ;
 
// Component to be extracted
 function MenuItems(props)
 {
    const item = props.item;
 
        return (
            <li>
                {item}
            </li>
        );
 }
  
// Component that will return an
 // unordered list
 function Navmenu(props)
 {
        const list = props.menuitems;
 
    const updatedList = list.map((listItems)=>{
            return (
                 
        );
    });
  
    return (
        <ul>{updatedList}</ul>);
 }
  
const menuItems = [1, 2, 3, 4, 5];
  
ReactDOM.render(
    ,
    document.getElementById( 'root' )
 );

Приведенный выше код будет успешно работать без каких-либо предупреждающих сообщений.

Уникальность ключей

Мы много раз говорили, обсуждая ключи, что ключи, назначенные элементам массива, должны быть уникальными. Под этим мы не имели в виду, что ключи должны быть глобально уникальными. Все элементы в конкретном массиве должны иметь уникальные ключи. То есть два разных массива могут иметь один и тот же набор ключей.
В приведенном ниже коде мы создали два разных массива menuItems1 и menuItems2 . Вы можете видеть в приведенном ниже коде, что ключи для первых 5 элементов для обоих массивов одинаковы, но код работает успешно без каких-либо предупреждений.

Javascript

 import React from 'react' ;
 import ReactDOM from 'react-dom' ;
 
// Component to be extracted
 function MenuItems(props)
 {
    const item = props.item;
 
        return (
            <li>
                {item}
            </li>
        );
 }
  
// Component that will return an
 // unordered list
 function Navmenu(props)
 {
        const list = props.menuitems;
 
    const updatedList = list.map((listItems)=>{
            return (
                 
        );
    });
  
    return (
        <ul>{updatedList}</ul>);
 }
  
const menuItems1 = [1, 2, 3, 4, 5];
 const menuItems2 = [1, 2, 3, 4, 5, 6];
  
ReactDOM.render(
    <div>
         
         
    </div>,
    document.getElementById( 'root' )
 );

Примечание . Ключи - это не то же самое, что реквизиты, только метод назначения «ключа» компоненту такой же, как у реквизита. Ключи являются внутренними для React и недоступны изнутри компонента, как реквизиты. Следовательно, мы можем использовать то же значение, которое мы присвоили ключу, для любого другого свойства, которое мы передаем компоненту.

React-js

ReactJS | Ключи

Javascript

Javascript

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ