Полезные видео о фронтенде. Подпишись на Rutube

Как работать с контекстом (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. Обработка ошибок при отсутствии провайдера

Если компонент пытается получить данные из контекста, но провайдер контекста отсутствует в иерархии компонентов, будет выброшена ошибка. Чтобы избежать этой ошибки, можно использовать значение по умолчанию при создании контекста:

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 позволяет передавать данные через дерево компонентов без необходимости передавать пропсы через каждый уровень. Он особенно полезен при работе с глобальными данными. Мы рассмотрели, как создать контекст, предоставить данные в контексте, получить данные из контекста и обработать изменения данных. Теперь вы можете успешно использовать контекст в функциональных компонентах React!

Frontend React

Как использовать фрагменты React

2 года назад·1 мин. на чтение

В этой статье рассмотрим использование фрагментов в приложениях React.

Что такое React Fragment?

React Fragment - это компонент React, который помогает нам возвращать несколько дочерних элементов без использования дополнительных DOM узлов. Если мы хотим вернуть группу элементов, то нужно обернуть их в общий тег. React компонент должен возвращать только один элемент, иначе будет ошибка. Следующий пример не будет работать, т.к. компонент возвращает несколько элементов - h1 и p.

import React from 'react';

function Welcome(props){
    return (
        <h1>Welcome to reactgo.com</h1>
        <p>Some dummy content</p>
    )
}

Фрагменты React представлены в версии 16. Давайте посмотрим на несколько примеров.

Без фрагментов 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.

Короткий синтаксис фрагментов

Существует также краткий синтаксис для фрагментов.

import React from 'react';

function Welcome(props){

    return (
       <>
         <h1>Welcome to reactgo.com</h1>
         <p>Some dummy content</p>
       </>
    )
}

Этот синтаксис использует пустые теги для объявления фрагментов react.

Еще несколько примеров

Использование фрагментов при возврате группы дочерних компонентов.

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/>
        </>
    )
}

Frontend React