Как работать с Context API в React и React Hooks

2 мая, 2022 12:36 пп 1 127 views | Комментариев нет

| | Комментировать запись

В этом материале мы поговорим о том, как внедрить Context API и React Hook useContext() в проект React. Context API — это структура React, которая позволяет всем уровням приложения обмениваться конкретными данными и помогает решить проблему пробрасывания (prop-drilling).

Хуки React— это функции, которые служат модульной заменой методов состояния и жизненного цикла в функциональных компонентах. Метод useContext() является альтернативой пробрасывания через дерево компонентов и создает внутреннее глобальное состояние для передачи данных.

Требования

  • Базовые знания по React.
  • Опционально – общие навыки работы с хуками React. Чтобы узнать больше по этой теме, ознакомьтесь с учебным пособием Как использовать хуки React в Gatsby.

Основы работы с Context API

Чтобы изучить работу Context API на практике, давайте рассмотрим, как получить доступ к контексту приложения React. React предлагает метод createContext() для передачи данных в качестве свойств.

В файле ColorContext.js задайте объект colors и передайте методу createContext() свойство в качестве аргумента:

const colors = {
  blue: "#03619c",
  yellow: "#8c8f03",
  red: "#9c0312"
};

export const ColorContext = React.createContext(colors.blue);

Это позволит методу .createContext() подписать colors.blue в качестве свойства одного компонента к другому.

Давайте теперь в другом файле попробуем применить к контексту компонент .Provider. Компонент позволяет использовать данные в контексте во всем приложении. В файл index.js импортируйте функцию ColorContext и добавьте ее к компоненту .Provider в операторе return:

[label index.js]

import React from 'react';
import { ColorContext } from "./ColorContext";

function App() {
  return (
    <ColorContext.Provider value={colors}>
      <Home />
    </ColorContext.Provider>
  );
}

Это создает обертку вокруг контекста функции ColorContext, чтобы раскрасить приложение. Хотя функция ColorContext существует в дереве компонентов, компонент .Provider упростит ее работу. Здесь компонент Home и его дочерние компоненты будут получать данные из ColorContext.

Вы также можете применить компонент .Consumer, чтобы подписаться на изменения контекста. Это доступно как в классе, так и в функциональных компонентах. Компонент .Consumer доступен только в операторе return. В операторе возврата в файле index.js установите компонент .Consumer для функции ColorContext:

[index.js]

return (
  <ColorContext.Consumer>
    {colors => <div style={colors.blue}>Hello World</div>}
  </ColorContext.Consumer>
);

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

Вы можете присвоить компоненту тип контекста: MyComponent.contextType = ColorContext;. Затем вы можете получить доступ к контексту в компоненте: let context = this.context;. Это позволяет получить доступ к контексту за пределами JSX. Вместо этого вы также можете указать static contextType = ColorContext;. Такой метод хорошо работает с компонентами на основе классов, поскольку упрощает перенос контекста в компонент. Но в функциональном компоненте это не сработает.

Вы также можете объявить контекст со свойством .contextType в компоненте класса и присвоить его значение функции ColorContext, а затем присвоить функции ColorContext значение static contextType. Эти методы применяются только внутри компонентов класса. Давайте рассмотрим, как вызывать контекст внутри функционального компонента.

Обработка метода useContext()

Метод useContext() принимает контекст внутри функционального компонента и работает с компонентами .Provider и .Consumer за один вызов. В файле index.js импортируйте метод useContext() и функцию ColorContext и объявите функциональный компонент:

import React, { useContext } from "react";
import ColorContext from './ColorContext';

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};

Функциональный компонент MyComponent устанавливает значение ColorContext в качестве аргумента метода useContext(). Оператор return применяет цвет фона в приложении. Когда изменение срабатывает, метод useContext() подписывается на обновление с последним значением контекста. По сравнению с Context API метод useContext() позволяет обмениваться данными и передавать их через приложение с помощью меньшего количества строк кода.

Заключение

Context API в React предоставляет встроенные функции и компоненты, которые позволяют избежать детализации дерева компонентов. Хук useContext() применяет ту же функциональность в теле компонента за один вызов.

Tags:

Добавить комментарий