Сегодня мы представляем вам первую часть перевода этого большого материала. Он посвящён детальному разбору новых возможностей React, которые появились в этой библиотеке начиная с версии 16. Автор этого материала уже 5 лет занимается программированием. В прошлом он был дизайнером и пробовал себя в качестве иллюстратора. Он включил в статью комиксы, которые, по его мнению, помогут читателям лучше усвоить то, о чём тут идёт речь.
В оригинале эта статья называется «Reintroducing React: every React update since v16 demystified». Название намекает на то, что читателю, возможно, уже знакомому с React, предлагается снова познакомиться с этой библиотекой. Это повторное знакомство с React поможет ему упорядочить то, что он уже знает, и открыть для себя что-то новое.
Прежде чем читать эту статью, вы можете загрузить электронную книгу, которая распространяется бесплатно. Она представляет собой тот же самый материал, оформленный в виде самостоятельного PDF, Epub или Mobi-файла. В книге примеры кода приведены с подсветкой синтаксиса. Возможно, вам удобнее будет читать материал и параллельно прорабатывать код, опираясь на книгу. Кроме того, рекомендуется пользоваться этим репозиторием. В нём можно найти код рассмотренных здесь примеров.
Я написал моё первое React-приложение около 4 лет назад. С тех пор фундаментальные принципы React не изменились. Перед нами всё тот же декларативный код и всё те же компоненты. Всё это хорошо, но то, как именно пишут современные React-приложения, отличается от того, что было раньше. За несколько лет в React появилось много нового, а кое-что из этой библиотеки убрали.
Если вы изучали React довольно давно — вполне возможно, что вы не особенно хорошо ориентируетесь в новых возможностях этой библиотеки. Кроме того, даже тот, кто следит за новшествами, вполне может в них, так сказать, «заблудиться». Как исправить ситуацию, поняв, что из старого нужно отбросить, а что из нового — принять? Как выделить те современные возможности React, которые могут оказаться особенно полезными?
Даже я, опытный программист, иногда теряюсь при необходимости забыть что-то старое и изучить вместо этого что-то новое. Это может выглядеть столь же непростой задачей, как изучение некоей совершенно новой концепции.
Если вы тоже чувствуете что-то подобное, то, надеюсь, моя работа сможет помочь вам расставить всё по своим местам.
То же самое можно сказать и о тех, кто только начал изучать React.
Вокруг имеется много устаревшей информации. Если вы изучаете React по каким-нибудь достаточно старым публикациям, то вы, безусловно, сможете освоить основы. Однако в современной React-разработке есть много новых интересных особенностей, которые достойны вашего внимания. Лучше всего узнать об этих возможностях как можно раньше, а не пытаться позже забыть старые методы работы и изучить вместо них новые.
Собственно говоря, здесь мы подробно разберём всё то новое, что появилось в React 16+.
На первый взгляд может показаться, что в React, после выхода 16 версии, внесено не так уж и много изменений. Но на самом деле это не так. Вот о чём мы будем говорить:
Каждый пункт этого списка представлен в виде отдельного большого раздела. Первый раздел посвящён новым методам жизненного цикла компонентов.
Уважаемые читатели! Сейчас мы размышляем о том, стоит ли переводить продолжение этого материала. Если тема React-разработки близка вам — приглашаем вас принять участие в голосовании и высказаться в комментариях.
В оригинале эта статья называется «Reintroducing React: every React update since v16 demystified». Название намекает на то, что читателю, возможно, уже знакомому с React, предлагается снова познакомиться с этой библиотекой. Это повторное знакомство с React поможет ему упорядочить то, что он уже знает, и открыть для себя что-то новое.
Как читать этот материал?
Прежде чем читать эту статью, вы можете загрузить электронную книгу, которая распространяется бесплатно. Она представляет собой тот же самый материал, оформленный в виде самостоятельного PDF, Epub или Mobi-файла. В книге примеры кода приведены с подсветкой синтаксиса. Возможно, вам удобнее будет читать материал и параллельно прорабатывать код, опираясь на книгу. Кроме того, рекомендуется пользоваться этим репозиторием. В нём можно найти код рассмотренных здесь примеров.
Для кого и зачем написан этот материал?
Я написал моё первое React-приложение около 4 лет назад. С тех пор фундаментальные принципы React не изменились. Перед нами всё тот же декларативный код и всё те же компоненты. Всё это хорошо, но то, как именно пишут современные React-приложения, отличается от того, что было раньше. За несколько лет в React появилось много нового, а кое-что из этой библиотеки убрали.
Если вы изучали React довольно давно — вполне возможно, что вы не особенно хорошо ориентируетесь в новых возможностях этой библиотеки. Кроме того, даже тот, кто следит за новшествами, вполне может в них, так сказать, «заблудиться». Как исправить ситуацию, поняв, что из старого нужно отбросить, а что из нового — принять? Как выделить те современные возможности React, которые могут оказаться особенно полезными?
Даже я, опытный программист, иногда теряюсь при необходимости забыть что-то старое и изучить вместо этого что-то новое. Это может выглядеть столь же непростой задачей, как изучение некоей совершенно новой концепции.
Если вы тоже чувствуете что-то подобное, то, надеюсь, моя работа сможет помочь вам расставить всё по своим местам.
То же самое можно сказать и о тех, кто только начал изучать React.
Вокруг имеется много устаревшей информации. Если вы изучаете React по каким-нибудь достаточно старым публикациям, то вы, безусловно, сможете освоить основы. Однако в современной React-разработке есть много новых интересных особенностей, которые достойны вашего внимания. Лучше всего узнать об этих возможностях как можно раньше, а не пытаться позже забыть старые методы работы и изучить вместо них новые.
Собственно говоря, здесь мы подробно разберём всё то новое, что появилось в React 16+.
Что нового появилось в React 16+?
На первый взгляд может показаться, что в React, после выхода 16 версии, внесено не так уж и много изменений. Но на самом деле это не так. Вот о чём мы будем говорить:
- Новые методы жизненного цикла компонентов.
- Упрощённое управление состоянием с использованием API Context.
- Свойство contextType и особенности API Context.
- Применение профилировщика: диаграммы, анализ взаимодействий.
- Ленивая загрузка материалов с использованием React.lazy и Suspense.
- Функциональная версия компонентов, основанных на PureComponent, созданная с помощью React.memo.
- Упрощение React-приложений с использованием хуков.
- Продвинутые паттерны проектирования React-приложений, основанные на применении хуков.
Каждый пункт этого списка представлен в виде отдельного большого раздела. Первый раздел посвящён новым методам жизненного цикла компонентов.
Уважаемые читатели! Сейчас мы размышляем о том, стоит ли переводить продолжение этого материала. Если тема React-разработки близка вам — приглашаем вас принять участие в голосовании и высказаться в комментариях.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Стоит ли переводить продолжение материала о новых возможностях React?
91.62% Да175
8.38% Нет16
Проголосовал 191 пользователь. Воздержались 18 пользователей.
