Как работать с контекстом (context) в React
месяц назад·1 мин. на чтение
В этой статье мы узнаем, как использовать контекст (context) в React для передачи данных между компонентами без явной передачи через props.
Контекст (context) в React - это механизм, который позволяет передавать данные через дерево компонентов без необходимости передавать пропсы через каждый уровень вложенности. Он особенно полезен при работе с глобальными данными, такими как информация о пользователе, настройки приложения и т.д. В этой статье мы рассмотрим, как использовать контекст в функциональных компонентах.
1. Создание контекста
Для начала создадим контекст с помощью функцииcreateContext()
из пакета react
. Например, мы хотим создать контекст для передачи информации о текущем пользователе:
import React, { createContext } from 'react'; const UserContext = createContext();
2. Предоставление данных в контексте
Далее мы должны предоставить данные в контексте. Для этого используем компонентProvider
из созданного контекста. Обычно это делается в верхнем компоненте приложения или в компоненте, где хранятся данные, которые нужно передать:
import React, { createContext } from 'react'; const UserContext = createContext(); const App = () => { const user = { name: 'John', age: 25 }; return ( <UserContext.Provider value={user}> {/* Дочерние компоненты */} </UserContext.Provider> ); };
3. Получение данных из контекста
Чтобы получить данные из контекста, используем хукuseContext()
из пакета react
. Передаем в него созданный контекст и получаем данные:
import React, { createContext, useContext } from 'react'; const UserContext = createContext(); const Profile = () => { const user = useContext(UserContext); return ( <div> <h2>{user.name}</h2> <p>{user.age} years old</p> </div> ); };
4. Обработка изменений данных в контексте
Если данные в контексте могут меняться, например, при аутентификации пользователя, мы можем использовать состояние и эффекты React для обновления данных контекста:import React, { createContext, useContext, useState, useEffect } from 'react'; const UserContext = createContext(); const App = () => { const [user, setUser] = useState(null); useEffect(() => { // Запрос на сервер для получения данных пользователя fetch('/api/user') .then(response => response.json()) .then(data => setUser(data)); }, []); return ( <UserContext.Provider value={user}> {/* Дочерние компоненты */} </UserContext.Provider> ); };
5. Обработка ошибок при отсутствии провайдера
Если компонент пытается получить данные из контекста, но провайдер контекста отсутствует в иерархии компонентов, будет выброшена ошибка. Чтобы избежать этой ошибки, можно использовать значение по умолчанию при создании контекста:В заключение, использование контекста в React позволяет передавать данные через дерево компонентов без необходимости передавать пропсы через каждый уровень. Он особенно полезен при работе с глобальными данными. Мы рассмотрели, как создать контекст, предоставить данные в контексте, получить данные из контекста и обработать изменения данных. Теперь вы можете успешно использовать контекст в функциональных компонентах React!import React, { createContext, useContext } from 'react'; const UserContext = createContext({ name: '', age: 0 }); const Profile = () => { const user = useContext(UserContext); return ( <div> <h2>{user.name}</h2> <p>{user.age} years old</p> </div> ); };
Как использовать фрагменты React
2 года назад·1 мин. на чтение
В этой статье рассмотрим использование фрагментов в приложениях React.
Что такое React Fragment?
React Fragment - это компонент React, который помогает нам возвращать несколько дочерних элементов без использования дополнительных DOM узлов. Если мы хотим вернуть группу элементов, то нужно обернуть их в общий тег. React компонент должен возвращать только один элемент, иначе будет ошибка. Следующий пример не будет работать, т.к. компонент возвращает несколько элементов -h1
и p
.
Фрагменты React представлены в версии 16. Давайте посмотрим на несколько примеров.import React from 'react'; function Welcome(props){ return ( <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> ) }
Без фрагментов React
Теперь мы заменяем код компонента приветствия с помощью фрагментов.import React from 'react'; function Welcome(props){ return ( <div> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </div> ) }
С помощью React Fragments
Используя фрагменты, мы перестали создавать дополнительный элементimport React,{Fragment} from 'react'; function Welcome(props){ return ( <Fragment> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </Fragment> ) }
div
в компоненте Welcome
.
Короткий синтаксис фрагментов
Существует также краткий синтаксис для фрагментов.Этот синтаксис использует пустые теги для объявления фрагментов react.import React from 'react'; function Welcome(props){ return ( <> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </> ) }
Еще несколько примеров
Использование фрагментов при возврате группы дочерних компонентов.function Button(){ return <button>Click</button> } function Name(){ return <h1>Hi react</h1> } function Post(){ return ( <div> <h1>Heading...</h1> <p>post content</p> </div> ) } function App(){ return ( <> <Post/> <Name/> <Button/> </> ) }