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

Введение

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

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

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 в объявлении возврата:

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:

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 ColorContext static contextType контекста 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(). Ваше объявление возврата применяет цвет фона в вашем приложении. Когда срабатывает изменение, метод useContext() подпишется на обновление с последним значением контекста. По сравнению с Context API метод useContext() позволяет обмениваться данными и передавать их по всему приложению с помощью меньшего количества строк кода.

Вывод

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