Введение: как читать эту книгу

Перевод книги Nadia Makarevich, Advanced React: deep dives, investigations, performance patterns and techniques (2023). Повествование от первого лица принадлежит автору.

React — один из самых популярных инструментов для frontend-разработки. С этим трудно спорить. Поэтому интернет полон курсов, книг и блогов о React. К тому же недавно вышедшая документация очень хороша. Зачем тогда нужна эта книга? Есть ли вообще пробел, который она могла бы заполнить?

Я считаю, что есть. Уже некоторое время я веду блог о продвинутых приёмах для React-разработчиков — developerway.com. Один из самых частых отзывов, которые я получаю: материалов продвинутого уровня недостаточно.

Документация отлично подходит для знакомства с React. Новичкам доступны миллионы книг, курсов и блогов. Но что делать после успешного старта? Куда идти, если хочется глубже понять, как всё устроено? Что читать, если вы уже какое-то время пишете на React и курсов для начинающих или даже разработчиков среднего уровня вам мало?

Ресурсов для этого не так много. Именно этот пробел и призвана заполнить книга.

Она предполагает определённые базовые знания React. Ожидается, что вы понимаете, что такое состояние и как с ним работать; что такое хуки и как их писать; что такое компонент и как рендерить одни компоненты внутри других. Другими словами, предполагается, что вы можете самостоятельно написать простое приложение со списком дел — todo.

Цель книги — дать знания, которые помогут пройти путь от «умею написать простое приложение» до «знаток React в своей команде». Мы сразу начнём с расследования и исправления ошибки производительности. Подробно разберём, что такое повторные рендеры и как они влияют на быстродействие. Рассмотрим работу алгоритма согласования — reconciliation, замыкания в React, различные приёмы композиции, способные заменить мемоизацию, сам механизм мемоизации, правильную реализацию debounce и многое другое.

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

Поэтому я рекомендую читать главы по порядку. Если ваши знания уже выходят за пределы простого todo-приложения, многие понятия, скорее всего, будут вам знакомы. Для этого в начале каждой главы есть список того, что вы из неё узнаете, а в конце — раздел «Главное» с очень кратким перечнем основных выводов. Если сначала просмотреть эти списки, можно быстро понять, что вас ждёт внутри.

Наконец, в книге я не провожу различий между react, react-dom и транспилятором JSX. Технически, например, за порталы отвечает библиотека react-dom, а транспиляторы вроде Babel преобразуют синтаксис JSX в вызовы функций. Но для понимания материала книги это различие несущественно. Когда мы пишем веб-интерфейсы, мы пользуемся всеми тремя, обычно даже не задумываясь об этом. Поэтому для простоты я называю всё это «React».

Надеюсь, вы готовы начать! Мы сразу исследуем проблему производительности, разберём главный миф о повторных рендерах и познакомимся с простым, но очень действенным приёмом оптимизации с помощью композиции.

Готовы? Тогда приступим!

Об издании

Advanced React

Подробные разборы, исследования, паттерны и приёмы повышения производительности.
Автор: Надя Макаревич (Nadia Makarevich).
Иллюстрации и дизайн обложки: Надя Макаревич.
Техническая рецензия: Андрей Грищенко (Andrew Grischenko).

Copyright © 2023. Все права защищены. Никакая часть этой книги не может быть воспроизведена, распространена или передана в какой-либо форме и какими-либо средствами, включая фотокопирование, запись и другие электронные или механические способы, без предварительного письменного разрешения правообладателя, за исключением коротких цитат в критических обзорах и некоторых других видов некоммерческого использования, допускаемых законодательством об авторском праве.

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

Тем не менее приведённые советы и стратегии могут подходить не каждому человеку и не для каждой ситуации. При необходимости читателям рекомендуется обратиться к специалисту. Автор не несёт ответственности за убытки, травмы или ущерб, возникшие вследствие использования информации из этой книги или доверия к ней, а также за ошибки и пропуски в её содержании.

Запросы на разрешение использования следует направлять автору: support@advanced-react.com.