Блог

Я следую руководству по ReactJS от www.tutorialpoints.com и я на этой странице

В двух словах он предоставляет следующие данные в формате JSON:

 this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },

            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },

            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
  

и выполняет цикл через него с помощью функции map, приведенной ниже:

 {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
  

Чего я не могу понять, так это почему они используют кортеж (person, i) для таргетинга на КАЖДЫЙ объект и как работает key = {i} часть кода. Я попытался удалить key часть, и код все еще работает. Из дальнейшего чтения я понял, что это помогает перезагрузить только определенные данные, которые были изменены, а не весь набор данных, но я не уверен.

Может ли кто-нибудь пройти ТОЛЬКО цикл в этом примере построчно, чтобы пояснить, как это работает?

Рассмотрим ваши .map() возвраты 10 элементов. Когда вы меняете один из 10 элементов, скажем, 5-й элемент, React не будет знать, какой элемент изменить в частности, без key . Таким образом, он повторно отобразит все элементы .map() .

Если вы предоставите key , элемент с этим key будет повторно отображен, оставляя остальные 9 элементов нетронутыми. Это делается для повышения производительности.

[ОБНОВИТЬ]

key Зарезервирован для уникальной идентификации элемента React. Это не обязательно должно быть i , это может быть любая случайная строка. Лично я использую shortid для генерации случайного уникального ключа.

 {this.state.data.map((person) => <TableRow key = {shortid.generate()} data = {person} />)}
  

React не будет добавлять свою ссылку ids ( data-reactid ), когда у вас есть массив элементов React. Когда вы пытаетесь отобразить этот массив, React добавит ваш key к своему data-reactid во время нормализации.

Массив элементов без key

 <tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
  

Массив элементов с key

 <tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$123" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$124" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$125" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$126" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$127" role="row">
  

Число после $ — это ключевое значение, которое вы предоставляете этому компоненту. С помощью этого React может однозначно идентифицировать компонент.

Последняя версия React не будет раскрывать data-reactid в DOM.

Прочитайте это для лучшего понимания