React JS #8 Списки и ключи (Lists & keys)
HTML-код
- Опубликовано: 12 ноя 2018
- #YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/re...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/facebook/create-re...
✔ React Developer Tools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (репозиторий): github.com/zalmoxisus/redux-d...
✔ Fake online REST API (моковый API): jsonplaceholder.typicode.com/
✔ Hacker News (ресурс): hn.algolia.com/?query=&sort=b...
✔ Hacker News (описание API): hn.algolia.com/api
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/package/redux-l...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/docs/getting-star...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity.org/react-tran...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtekmaj.pl/react-li...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com/wp-content/upl...
✔ React Transition Group (документация): reactcommunity.org/react-tran...
✔ React Router (репозиторий): github.com/ReactTraining/reac...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Преподесение материала на высшем уровне. Спасибо!
Спасибо огромное за вашу оценку!
Читал, что key в списках нужен из-за эвристик, которые Реакт использует для оптимизации рендеринга. Конкретно, если из списка удалить только первый элемент и ключей у элемента списка нет, то Реакт сравнит первый элемент нового списка с первым элементом старого, увидит различия и решит, что весь список изменился и надо его весь перерендерить. Уникальные ключи - способ помочь Реакту понять, какая часть списка изменилась, а какая нет. Индексы массива использовать нельзя, потому что, например, при том же удалении первого элемента и последующем ререндеринге индексы сместятся, и Реакт, глядя на индексы в списке примет новый элемент с индексом "0" (у которого раньше был индекс "1") за старый элемент с индексом "0" (тот, что мы удалили), новый элемент с индексом "1" (бывший "2") за старый элемент с индексом "1" и так далее, а не найдя последний индекс, подумает, что удалён из списка был именно он. В данном случае лучше уж вообще не использовать key. Будет перерендериваться весь список и пострадает скорость, но хотя бы не будет риска некорректной работы программы.
Вот у меня на собеседовании спросили, почему именно нельзя использовать индексы как ключи. И попросили привести пример. Так что спасибо за комментарий. Пойду тестить
это просто гениально просто!!! спасибо!!!!!!
Пожалуйста!)
спасибо, очень доступно!!!
Благодарю
Спасибо за материал!
Спасибо за отзыв!
спасибо, для меня были важны key, если нету id
Пожалуйста!
Качественно
Благодарю
Спасибо! в jsx везде желательно окружать выводимый код фрагментом или можно и дивом? не помню говорили, или нет об этом)
посмотрел следующий урок, вопрос отпал))
Отлично!)
А как расширение браузера понимает внутреннюю структуру реакт приложения? ведь по идее браузер имеет дело уже с транспилированным JS. Или есть некая мета инфа, доступная в dev режиме?
В dev режиме есть инфа
все классно, но немного не понятно как конфигурационный файл помог решить проблему с оптимизацией,
мы добавили поле icons, но map все равно ж проходит по всему списку .
Не с оптимизацией, а с будущем расширением кода
Закладка React в инспекторе, я так понимаю это плагин?
Да react developer tools
Доброго времени суток.
У меня в расширении на хром дерево компонентов выглядит иначе. Там всего два компонента без разметки внутри. Не подскажете, пожалуйста, какое расширение стоит у Вас?
Кажется они просто изменили расширение, теперь такого нету...
Все инструменты, которые я использую, указаны в репозитории. Просто расширение React DevTools обновилось и теперь оно выглядит по-другому
Блин, после learn javascript так непривычно const использовать, там let повсюду)
))
То есть, эти ключи в дальнейшем вообще не понадобятся? Только для самого фреймворка?
Да
нужны срочно уроки по Редакс, а то сейчас прошел на проек и там все на нем повязано)
Уроки по Релакс будут в декабре, раньше, к сожалению, никак
+
Интересно, концовка на всех роликах это одна запись? ))
Нет, писалась разная)