0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>React передает данные внутрь компонентов с верхних уровней на нижние, используя пропсы.</p>
1
<p>React передает данные внутрь компонентов с верхних уровней на нижние, используя пропсы.</p>
2
<p>Такой подход неудобен при работе с глобальными данными, которые нужны одновременно во многих компонентах на разных уровнях иерархии. К таким данным относится текущий уровень, текущая тема (темная или светлая) и так далее. Напрямую передавать такие данные неудобно, придется протаскивать их сквозь все приложение.</p>
2
<p>Такой подход неудобен при работе с глобальными данными, которые нужны одновременно во многих компонентах на разных уровнях иерархии. К таким данным относится текущий уровень, текущая тема (темная или светлая) и так далее. Напрямую передавать такие данные неудобно, придется протаскивать их сквозь все приложение.</p>
3
<p>В таких случаях React позволяет передать данные в приложение и получить внутри любого компонента доступ к этим данным напрямую, минуя пропсы. Этот механизм называется<strong>контекст</strong>.</p>
3
<p>В таких случаях React позволяет передать данные в приложение и получить внутри любого компонента доступ к этим данным напрямую, минуя пропсы. Этот механизм называется<strong>контекст</strong>.</p>
4
<p>Хук useContext() позволяет использовать контекст внутри компонента. Для этого нужно выполнить три действия:</p>
4
<p>Хук useContext() позволяет использовать контекст внутри компонента. Для этого нужно выполнить три действия:</p>
5
<ol><li><p>Инициализировать контекст в том же месте, где инициализируется приложение</p>
5
<ol><li><p>Инициализировать контекст в том же месте, где инициализируется приложение</p>
6
</li>
6
</li>
7
<li><p>Подключить провайдер и передать данные в контекст через пропс value.</p>
7
<li><p>Подключить провайдер и передать данные в контекст через пропс value.</p>
8
</li>
8
</li>
9
<li><p>Получить данные контекста</p>
9
<li><p>Получить данные контекста</p>
10
</li>
10
</li>
11
</ol><p>Вот другой пример контекста, в котором хранится текущая тема:</p>
11
</ol><p>Вот другой пример контекста, в котором хранится текущая тема:</p>
12
<p>И где-то внутри приложения:</p>
12
<p>И где-то внутри приложения:</p>
13
<p>Метод React.createContext() принимает значение по умолчанию. Это значение будет передаваться в контекст тех компонентов, которые не обернуты в провайдер. Обычно провайдер всегда используется, чтобы оборачивать все приложение. Поэтому компоненты всегда принимают в контексте значение, переданное провайдером. Но если мы работаем с компонентом вне провайдера, может понадобиться такое значение по умолчанию. Например, такая ситуация может сложиться при тестировании компонента отдельно от приложения.</p>
13
<p>Метод React.createContext() принимает значение по умолчанию. Это значение будет передаваться в контекст тех компонентов, которые не обернуты в провайдер. Обычно провайдер всегда используется, чтобы оборачивать все приложение. Поэтому компоненты всегда принимают в контексте значение, переданное провайдером. Но если мы работаем с компонентом вне провайдера, может понадобиться такое значение по умолчанию. Например, такая ситуация может сложиться при тестировании компонента отдельно от приложения.</p>
14
<p>Внутри контекста может храниться как примитивное значение, так и объект. Изменение содержимого такого объекта никак не отслеживается React, поэтому не приводит к перерендеру. Но если заменить сам объект, то из-за изменившейся ссылки React узнает об изменении и выполнит перерисовку компонентов внутри провайдера.</p>
14
<p>Внутри контекста может храниться как примитивное значение, так и объект. Изменение содержимого такого объекта никак не отслеживается React, поэтому не приводит к перерендеру. Но если заменить сам объект, то из-за изменившейся ссылки React узнает об изменении и выполнит перерисовку компонентов внутри провайдера.</p>
15
<p>Иногда возникает ситуация, когда в контексте нужно хранить динамические данные. Например, при авторизации. Когда пользователь авторизован, мы должны сохранить какие-то данные, чтобы пользователю предоставлялись дополнительные функции. Сам по себе контекст для этого ничего не предоставляет, но можно передать в контекст методы для манипулирования данными, а сами данные хранить с помощью useState(). Более продвинутый вариант - это создать провайдер в отдельном компоненте. Так мы сможем изолировать данные от всего приложения, а в компоненты передавать интерфейс для взаимодействия с данными.</p>
15
<p>Иногда возникает ситуация, когда в контексте нужно хранить динамические данные. Например, при авторизации. Когда пользователь авторизован, мы должны сохранить какие-то данные, чтобы пользователю предоставлялись дополнительные функции. Сам по себе контекст для этого ничего не предоставляет, но можно передать в контекст методы для манипулирования данными, а сами данные хранить с помощью useState(). Более продвинутый вариант - это создать провайдер в отдельном компоненте. Так мы сможем изолировать данные от всего приложения, а в компоненты передавать интерфейс для взаимодействия с данными.</p>
16
<p>Для этого создадим контекст в отдельном модуле, чтобы все компоненты могли его импортировать:</p>
16
<p>Для этого создадим контекст в отдельном модуле, чтобы все компоненты могли его импортировать:</p>
17
<p>Создаем отдельный компонент провайдера:</p>
17
<p>Создаем отдельный компонент провайдера:</p>
18
<p>И внутри приложения используем провайдер как обычный компонент:</p>
18
<p>И внутри приложения используем провайдер как обычный компонент:</p>
19
<p>В самом компоненте теперь можно импортировать контекст и использовать функции из провайдера для изменения состояния в контексте:</p>
19
<p>В самом компоненте теперь можно импортировать контекст и использовать функции из провайдера для изменения состояния в контексте:</p>
20
<p>Не забываем встроить приложение на страницу:</p>
20
<p>Не забываем встроить приложение на страницу:</p>
21
<p>Контекст - удобный механизм для некоторых особых ситуаций, но он не должен становиться основным способом передачи данных внутрь приложения. Такой соблазн появляется у многих, кто использует его впервые. Главная проблема контекстов - связывание компонентов с глобальными данными, а это затрудняет их повторное использование в других ситуациях.</p>
21
<p>Контекст - удобный механизм для некоторых особых ситуаций, но он не должен становиться основным способом передачи данных внутрь приложения. Такой соблазн появляется у многих, кто использует его впервые. Главная проблема контекстов - связывание компонентов с глобальными данными, а это затрудняет их повторное использование в других ситуациях.</p>