Детальный разбор новых возможностей React 16+, часть 1: общие сведения

Сегодня мы представляем вам первую часть перевода этого ^[1] большого материала. Он посвящён детальному разбору новых возможностей React, которые появились в этой библиотеке начиная с версии 16. Автор этого материала уже 5 лет занимается программированием. В прошлом он был дизайнером и пробовал себя в качестве иллюстратора. Он включил в статью комиксы, которые, по его мнению, помогут читателям лучше усвоить то, о чём тут идёт речь.
^[2]
В оригинале эта статья называется «Reintroducing React: every React update since v16 demystified». Название намекает на то, что читателю, возможно, уже знакомому с React, предлагается снова познакомиться с этой библиотекой. Это повторное знакомство с React поможет ему упорядочить то, что он уже знает, и открыть для себя что-то новое.

Как читать этот материал?

Прежде чем читать эту статью, вы можете загрузить электронную книгу ^[3], которая распространяется бесплатно. Она представляет собой тот же самый материал, оформленный в виде самостоятельного PDF, Epub или Mobi-файла. В книге примеры кода приведены с подсветкой синтаксиса. Возможно, вам удобнее будет читать материал и параллельно прорабатывать код, опираясь на книгу. Кроме того, рекомендуется пользоваться этим ^[4] репозиторием. В нём можно найти код рассмотренных здесь примеров.

Для кого и зачем написан этот материал?

Я написал моё первое React-приложение около 4 лет назад. С тех пор фундаментальные принципы React не изменились. Перед нами всё тот же декларативный код и всё те же компоненты. Всё это хорошо, но то, как именно пишут современные React-приложения, отличается от того, что было раньше. За несколько лет в React появилось много нового, а кое-что из этой библиотеки убрали.

Если вы изучали React довольно давно — вполне возможно, что вы не особенно хорошо ориентируетесь в новых возможностях этой библиотеки. Кроме того, даже тот, кто следит за новшествами, вполне может в них, так сказать, «заблудиться». Как исправить ситуацию, поняв, что из старого нужно отбросить, а что из нового — принять? Как выделить те современные возможности React, которые могут оказаться особенно полезными?

Даже я, опытный программист, иногда теряюсь при необходимости забыть что-то старое и изучить вместо этого что-то новое. Это может выглядеть столь же непростой задачей, как изучение некоей совершенно новой концепции.

Если вы тоже чувствуете что-то подобное, то, надеюсь, моя работа сможет помочь вам расставить всё по своим местам.

То же самое можно сказать и о тех, кто только начал изучать React.

Вокруг имеется много устаревшей информации. Если вы изучаете React по каким-нибудь достаточно старым публикациям, то вы, безусловно, сможете освоить основы. Однако в современной React-разработке есть много новых интересных особенностей, которые достойны вашего внимания. Лучше всего узнать об этих возможностях как можно раньше, а не пытаться позже забыть старые методы работы и изучить вместо них новые.

Собственно говоря, здесь мы подробно разберём всё то новое, что появилось в React 16+.

Что нового появилось в React 16+?

На первый взгляд может показаться, что в React, после выхода 16 версии, внесено не так уж и много изменений. Но на самом деле это не так. Вот о чём мы будем говорить:

1. Новые методы жизненного цикла компонентов.
2. Упрощённое управление состоянием с использованием API Context.
3. Свойство contextType и особенности API Context.
4. Применение профилировщика: диаграммы, анализ взаимодействий.
5. Ленивая загрузка материалов с использованием React.lazy и Suspense.
6. Функциональная версия компонентов, основанных на PureComponent, созданная с помощью React.memo.
7. Упрощение React-приложений с использованием хуков.
8. Продвинутые паттерны проектирования React-приложений, основанные на применении хуков.

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

Уважаемые читатели! Сейчас мы размышляем о том, стоит ли переводить продолжение этого ^[1] материала. Если тема React-разработки близка вам — приглашаем вас принять участие в голосовании и высказаться в комментариях.

^[5]

Автор: ru_vds

Источник ^[6]