Как клавиши реагирования работают и забавные вещи, которые вы можете сделать с ними

Кристоф Мишель

Реагирование использует ключ атрибут во время Его фаза примирения решить, какой Элементы можно повторно использовать для следующего визуализации. Они важны для динамических списков. React будет сравнивать ключи нового элемента с предыдущими клавишами и 1) компонентами монтажа, имеющими новую клавишу 2) размонтируют компоненты, клавиши которых больше не используются.

Многие разработчики реагирования услышали общий совет, который вы не должен использовать Индекс как ключ Отказ Но что именно может пойти не так при использовании ключ с плохим способом? Что еще мы можем сделать, когда мы играем с ключами?

Для лучшего понимания давайте рассмотрим Пример оказания списка вход с. При нажатии кнопки мы вставем новый элемент с помощью текста Спереди на фронт списка.

import React from "react";import { render } from "react-dom";class Item extends React.PureComponent {  state = {    text: this.props.text  };  onChange = event => {    this.setState({      text: event.target.value    });  };  componentDidMount() {    console.log("Mounted ", this.props.text);  }  componentWillUnmount() {    console.log("Unmounting ", this.props.text);  }  render() {    console.log("rerendering ", this.props.text);    const { text } = this.state;    return (      
              
    );  }}class App extends React.Component {  state = {    items: [      {        text: "First",        id: 1      },      {        text: "Second",        id: 2      }    ]  };  addItem = () => {    const items = [{ text: "Front", id: Date.now() }, ...this.state.items];    this.setState({ items });  };  render() {    return (      
        
          {this.state.items.map((item, index) => (                      ))}        
        Add Item      
    );  }}render(, document.getElementById("root"));

Если вы используете Индекс В качестве ключа происходит следующее:

CodeSandbox CodeSandbox – это онлайн-редактор, адаптированный для веб-приложений. codesandbox.io

Что если другое Предмет с текстом Второй вместо Спереди вставлен Назад списка? Вот что происходит:

1. Пункт представляет собой неконтролируемый компонент : Текст, который пользователь пишет в его вход поле хранится как штат
2. Новый элемент данных {Текст: "Фронт"} вставляется в начало данных списка.
3. Список восстанавливается с Индекс ценность как ключ . Таким образом, предыдущие компоненты повторно используются для первых двух Элементы данных и дают правильные реквизиты Спереди а также Первый , но государство не обновляется в Элемент . Вот почему первые два экземпляра компонентов сохраняют тот же текст.
4. Новый экземпляр компонента создан для Ключ: 2 Потому что предыдущий соответствующий ключ не найден. Это наполнено реквизит последнего Список данных элемента который является Второй Отказ

Еще один интересный момент – это оказывать звонки, которые происходят. Предмет – это PURECOMPONENT Так что это только обновляет, когда текст Опытные (или государственные) изменения:

rerendering  Frontrerendering  Firstrerendering  SecondMounted  Second

Все Компоненты восстанавливаются. Это происходит потому, что элемент с Ключ: 0 повторно используется для первого элемента данных и получает его реквизит , но первый элемент данных сейчас Новый Спереди Объект, вызывающий оказывать Отказ То же самое происходит с другими компонентами, потому что старые элементы данных теперь все смещены на одно место.

Так что же самое исправить? Исправление легко: мы даем каждый элемент данных списка уникальный ID один раз После создания (не на каждом рендере!). Все экземпляры компонентов будут сопоставлены со своим соответствующим элементом данных. Они получают то же самое реквизит Как и прежде, и это избегает другого оказывать Отказ

Давайте игнорируем преимущества производительности, которые приходят из использования ID S в динамических списках на данный момент. Пример показывает, что Ошибки, представленные ключами, когда-либо случаются только в отношении неконтролируемый Компоненты , компоненты, которые сохраняют внутреннее состояние Отказ

Если мы переписываем Предмет В качестве контролируемого компонента, перемещая состояние из него, ошибка ушла.

Почему? Опять же, потому что ошибка была Повторное использование компонента для другого элемента данных. Поэтому внутреннее состояние все еще отражение состояния предыдущих данных предметов , но реквизит другого Отказ Создание контролируемого компонентами, полностью удаляя его государство, у нас больше нет этого несоответствия. (Но есть еще проблема с ненужными рендерами.)

Злоупотребление ключами для исправления сломанных сторонних компонентов

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

Если вы измените ключ, отреагируйте весь свой компонент (размонтируют его) и устанавливают новый экземпляр компонента на его месте. Почему это может быть полезно?

Опять же, мы возвращаемся в неконтролируемые компоненты Отказ Иногда вы используете сторонний компонент, и вы не можете изменить свой код, чтобы он контролировал его. Если компонент имеет некоторое внутреннее состояние, и он реализован плохим образом (например, государство происходит только один раз в конструкторе, но GetderedStateFromProps / ComponentWillReceiveProps не реализован на отражать повторение реквизит изменения во внутреннем состоянии) Стандартное устройство React Toolbox не может помочь вам здесь. Нет FordereMount Отказ

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

TL; DR:

Использование Индекс Как ключ может:

1. привести к ненужным повторным рендерикам
2. Представьте ошибки, когда элементы списка есть неконтролируемые компоненты Но все же использовать реквизит

ключ Свойство может быть использовано для формирования полного монтирования компонента, который иногда может быть полезен.

Первоначально опубликовано в cmichel.io

Оригинал: “https://www.freecodecamp.org/news/react-fun-with-keys-68f4c8c36f3e/”