ReactJS - Context: ABeginner's Guide

Привет,野心勃勃的开发者们! Сегодня мы окунемся в чудесный мир ReactJS Context. Как ваш добросердечный邻居-преподаватель информатики, я здесь, чтобы направить вас через это понятие с тем же энтузиазмом, который я испытывал, когда впервые узнал об этом. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это увлекательное путешествие вместе со мной!

Что такое Context в React?

Представьте, что вы на семейном собрании и хотите поделиться смешной историей со всеми. Разве не было бы замечательно просто объявить ее один раз, и все могли бы ее услышать? Именно так и работает Context в React!

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

Когда использовать Context

Прежде чем углубиться, давайте поймем, когда использовать Context:

1. Когда у вас есть данные, которые должны быть доступны многим компонентам на разных уровнях вложенности.
2. Когда вы хотите избежать "проп drilling" (передачи пропсов через промежуточные компоненты, которые не нуждаются в этих данных).

Создание и использование Context

Давайте пройдемся по процессу создания и использования Context с примерами кода.

Шаг 1: Создание Context

Сначала нам нужно создать Context. Для этого мы используем метод React.createContext().

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

В этом примере мы создали ThemeContext с_EDEFAULTом 'light'. Этот_EDEFAULT используется, когда компонент не имеет соответствующего Провайдера выше себя в древе.

Шаг 2: Предоставление Context

Теперь, когда у нас есть наш Context, нам нужно предоставить его компонентному древу. Мы делаем это с помощью компонента Context.Provider.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

В этом примере мы оборачиваем наш компонент Toolbar (и всех его детей) компонентом ThemeContext.Provider. Мы устанавливаем значение "dark", которое будет доступно всем компонентам внутри этого Провайдера.

Шаг 3: Использование Context

Теперь comesfunpart - использование нашего Context! Есть два способаconsume Context:

1. Class.contextType
2. Context.Consumer

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

Использование Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Я тематическая кнопка!</button>;
}
}

В этом примере ThemedButton - это классный компонент. Мы установили его contextType на наш ThemeContext. Теперь this.context даст нам доступ к текущему значению контекста.

Использование Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Я тематическая кнопка!</button>}
</ThemeContext.Consumer>
);
}

Здесь мы используем компонент Context.Consumer. Он использует рендер-проп, чтобы передать текущее значение контекста функции.

Множественные Contextы

Иногда вам может потребоваться использовать несколько контекстов. React позволяет вам вкладывать несколько Контекстных Провайдеров:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

И вы можетеconsume несколько контекстов так:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} использует тему {theme}
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Обновление Context

Контекст также может быть динамичным. Давайте рассмотрим пример, где мы обновляем нашу тему:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Переключить тему
</button>
</ThemeContext.Provider>
);
}

В этом примере мы используем хук useState для управления是我们的 tematstate. Мы передаем текущую тему и функцию setTheme в значение нашего контекста.

Методы Context

Вот таблица, резюмирующая основные методы Context, которые мы рассмотрели:

Метод	Описание
React.createContext()	Создает объект Context
Context.Provider	Предоставляет значение контекста компонентам
Class.contextType	Позволяет классным компонентам consume один контекст
Context.Consumer	Позволяет функциональным компонентам подписываться на контекст

Заключение

И вот мы и arrived, друзья! Мы прошли через страну React Context, от его создания до его использования и даже обновления. Контекст - это мощный инструмент в React, позволяющий избежать проп drilling и эффективно управлять глобальным состоянием.

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

Продолжайте практиковаться, продолжайте программировать и, что самое главное, продолжайте наслаждаться! До свидания, счастливого Reacting!

Credits: Image by storyset