Job-Ready React» Мортена Барклунда (Manning, 2024),
Если вы определяете свойство для элемента JSX, ссылающегося на узел HTML, и это свойство соответствует одному из известных событий из списка событий, поддерживаемых React, то React рассматривает это свойство как прослушиватель события, а не как атрибут DOM. Тогда React обеспечит правильное добавление и удаление прослушивателя события при монтировании и демонтировании компонента.
Если вас интересует техническая сторона алгоритмов и нотация «О-большое», следующие две статьи отлично объясняют, как команде React удалось превратить задачу O(n3) в задачу O(n):
• Reconciliation на сайте React (http://mng.bz/PQ9X);
• React’s Diff Algorithm Кристофера Шедо (Christopher Chedeau) (http://mng.bz/68L4).
Библиотеки моделей данных и бэкенда, такие как TanStack Query (https://tanstack.com/query/latest), Redux (http://redux.js.org), Recoil.js (https://recoiljs.org/), XState (https://xstate.js.org/) и Apollo (www.apollographql.com/).
• Библиотека маршрутизации — часто используется React Router (https://github.com/reactjs/react-router) или аналогичный маршрутизатор, реализованный во многих фреймворках.
• Библиотеки стилей — либо заранее определенный набор компонентов с примененными стилями, такими как Material UI (https://mui.com/) или Bootstrap (https://react-bootstrap.github.io/), либо библиотека, обеспечивающая удобство работы с CSS внутри компонентов React, например Styled-Components (https://styled-components.com/), Vanilla Extract (https://vanilla-extract.style/) или даже Tailwind CSS (https://tailwindcss.com/).
Отличный (и тщательно отобранный) список компонентов React для разных целей можно найти на странице https://github.com/brillout/awesome-react-components. В этом списке есть все, от UI-компонентов (включая множество элементов форм) до полных UI-фреймворков или вспомогательных средств разработки и инструментов тестирования.
Это классический пример целей, для которых предназначен хук useEffect, — то есть выполнения побочных эффектов компонента. Заголовок документа невозможно обновить через DOM, поэтому его обновление должно быть побочным эффектом; в таких ситуациях useEffect — лучший выбор
прямая деструктуризация свойств в сигнатуре функции. Деструктуризацией называется компактный механизм извлечения частей составного значения.
стандартные схемы, которые многие разработчики применяют для организации ветвления в компонентах React, использующих JSX:
• Быстрый возврат при пустом рендеринге.
• Тернарный оператор для рендеринга альтернативных элементов.
• Логический оператор И (&&) для рендеринга необязательных элементов.
• Объектные отображения для рендеринга разнообразных элементов.
• Дополнительные компоненты для более сложного ветвления.
Декларативный стиль означает, что разработчик определяет, что должно получиться, а не как это делать шаг за шагом (как в императивном стиле).
• Выражения вместо команд — программирование в императивном стиле часто работает с независимыми командами, которые сами по себе изменяют состояние программы, тогда как в декларативном программировании используются выражения, которые в сочетании друг с другом направляют логику выполнения.