Поиск по сайту:

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


Введение

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

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

Предпосылки

  • Требуется понимание React. Чтобы узнать больше о React, ознакомьтесь с серией статей How To Code in React.
  • Общие знания React Hooks рекомендуются, но не обязательны. Чтобы узнать больше о React Hooks, ознакомьтесь с учебным пособием How To Apply React Hooks in Your React Project.

Изучение контекстного 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 к своему контексту в другом файле. Компонент .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. Дочерние компоненты Home также будут получать данные из ColorContext.

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

[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 контекстному API 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 предоставляет вам встроенные функции и компоненты, чтобы избежать детализации вашего дерева компонентов. React Hook useContext() применяет ту же функциональность в обтекаемом, функциональном теле компонента за один вызов.

Посетите страницу темы React, чтобы узнать о дополнительных проектах и ресурсах.