React. Context API. Portals

Context API

Версия 16.3 представляет новое context API, которое эффективнее и поддерживает сразу как проверку статичных типов (static type checking) так и глубокие обновления (deep updates).

Когда использовать Context ?

1. Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочтительный язык.
2. Через контекст можно прокинуть props минуя несколько дочерних уровней в нужный компонент.

Прежде чем использовать контекст

Контекст в основном используется, когда некоторые данные должны быть доступны для многих компонентов на разных уровнях вложенности. Применяйте его экономно, потому что это затрудняет повторное использование компонентов. Рассмотрим компонент страницы, который передает user, и аватарSize на несколько уровней вниз, чтобы глубоко вложенные компоненты Link и Avatar могли прочитать его:

<Page user={user} avatarSize={avatarSize} />
// ... дальше потомку ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... дальше потомку ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... дальше потомку...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

А дальше посмотрим на практике…

Portals

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

А дальше посмотрим на практике…