React — Что такое контекст

Контекст — это способ предоставления данных между деревом компонентов без необходимости вручную передавать реквизиты на каждом уровне, это позволяет избежать бурения реквизитов, когда многие уровни компонентов передают один и тот же реквизит своим дочерним компонентам, даже если они его не используют, эта проблема решается с помощью создания контекста.

React.createContext

Создает объект Context ( контекст ). Когда React отображает компонент, который подписывается на этот объект Context, он будет считывать текущее значение из Provider.

...
const MyContext = React.createContext(defaultValue);
Войдите в полноэкранный режим Выход из полноэкранного режима

Контекст.Провайдер

Каждый объект Context ( контекст ) поставляется с компонентом Provider, который позволяет компонентам-потребителям подписываться на изменения в контексте.

...
<MyContext.Provider value={/* algum valor */}/>
Войдите в полноэкранный режим Выход из полноэкранного режима

Компонент Provider принимает значение prop, которое содержит данные, потребляемые компонентами, являющимися потомками этого Provider.

Все потребители, которые являются потомками провайдера, будут перерисовываться каждый раз, когда значение prop провайдера изменится.

useContext

UseContext позволяет получить доступ к данным, предоставляемым в определенном контексте, созданном и вставленном в дерево компонентов.

const value = useContext(MyContext);
Войдите в полноэкранный режим Выход из полноэкранного режима

Давайте рассмотрим на примере:

import React, { useState, createContext } from "react";

// Criação do contexto
export const myContext = createContext();

const styles = {
  dark: {
    backgroundColor: "#333",
    color: "#f5f5f5",
  },
  light: {
    backgroundColor: "#f5f5f5",
    color: "#333",
  },
};

const user = {
  name: "Jorge",
};

// Função que retorna o Provider.
export const ContextProvider = ({ children }) => {
  const { dark, light } = styles;
  const [theme, setTheme] = useState(light);

  const toggleTheme = () => {
    setTheme((oldTheme) => (oldTheme === light ? dark : light));
  };

  return (
    // Componente Provider com dados/funções na prop value.
    <myContext.Provider value={{ user, toggleTheme, theme }}>
      {children}
    </myContext.Provider>
  );
};

Войдите в полноэкранный режим Выход из полноэкранного режима

Только для примера мы создаем контекст с различными темами и информацией о пользователе и делаем его доступным для потребления каждым деревом внутри провайдера whrapper.

Ниже приведен компонент, который будет потреблять этот контекст:


import React, { useState, useEffect, useContext } from "react";

// importe do contexto
import { myContext } from "./Context-Provider";

const Consumer = () => {
  // useContext utilizando o contexto como argumento
  const { toggleTheme, theme } = useContext(myContext);

  return (
    <ContextProvider>
    <div style={theme}>
      <UserInfo />
      <hr />
      <Counter />
      <hr />
      // Aqui o botão chama a função para alterna o theme
      <button style={{ padding: "8px 12px" }} onClick={toggleTheme}>
        {" "}
        Toggle Theme
      </button>
    </div>
    </ContextProvider>
  );
};
export default Consumer;

// Componentes filhos também tem acesso ao objeto de contexto

// Componente Counter
const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>+</button> |{" "}
      <button onClick={() => setCounter(counter - 1)}>-</button>
    </>
  );
};

// Componente UserInfo
const UserInfo = () => {
  const { user } = useContext(myContext);
  return (
    <>
      <strong>User: {user.name}</strong>
    </>
  );
};
Войдите в полноэкранный режим Выход из полноэкранного режима

В компоненте-потребителе, а также в его дочерних компонентах, можно получить доступ к данным/функциям, предоставляемым созданным контекстом, сохраняя возможность неструктурировать возвращаемый объект, получая только необходимую информацию для каждого компонента.

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

Спасибо, что читаете!


Официальная документация: Context | useContext


Следуйте за мной 🙂

Github | Linkedin

Оцените статью
Procodings.ru
Добавить комментарий