ReactJS - Использование useContext: Пособие для начинающих

Здравствуйте,future React разработчики! Сегодня мы погрузимся в одну из самых мощных функций React: хук useContext. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это понятие шаг за шагом. Не волнуйтесь, если вы новички в программировании – мы начнем с азов и постепенно поднимемся!

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

Прежде чем мы перейдем к useContext, давайте поймем, что такое Context в React. Представьте, что вы организовываете большой семейный ужин. У вас есть особый соус, который нужно передать по всему столу. Вместо того чтобы передавать его от человека к человеку (что похоже на проп-дрилинг в React), не было бы удобнее, если бы вы могли поставить его в центр стола, где все могли бы до него дотянуться? Вот что делает Context в React – он предоставляет способ передать данные через компонентное древо, не передавая пропы вручную на каждом уровне.

Понимание useContext

Теперь useContext – это хук, который позволяет нам легко consume этот Context в наших функциональных компонентах. Это как если бы каждый человек за столом имел прямой доступ к этому особому соусу, не прося других передать его.

Сигнатура useContext

Давайте посмотрим, как мы используем useContext:

const value = useContext(MyContext)

Вот что означает каждая часть:

• value: Это текущее значение контекста
• MyContext: Это объект контекста (созданный с помощью React.createContext)

Это так просто! Но давайте разберем это дальше с реальным примером.

Использование Context через хук

Давайте создадим простой переключатель темы для нашего приложения. Мы будем использовать Context для хранения текущей темы и useContext для доступа к ней в наших компонентах.

Сначала создадим наш контекст:

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

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

export default ThemeContext;

Теперь создадим компонент, который использует этот контекст:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
Я按钮的主题是{theme}!
</button>
);
}

export default ThemedButton;

В этом примере useContext(ThemeContext) дает нам текущее значение темы. Мы затем используем это значение для стилизации нашей кнопки.

Теперь посмотрим, как мы можем предоставить этот контекст в нашем приложении:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Добро пожаловать в наше themed приложение!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Здесь мы оборачиваем наше приложение в ThemeContext.Provider и устанавливаем значение "dark". Это означает, что любой компонент внутри этого провайдера может получить доступ к этому значению темы, используя useContext.

Обновление Context

Теперь что, если мы хотим разрешить пользователям переключать темы? Мы можем сделать это, обновив是我们的 значение контекста. Давайте изменим наш компонент App:

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

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

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

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Добро пожаловать в наше themed приложение!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Переключить тему</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Теперь мы используем состояние для управления нашей темой, и мы добавили кнопку для переключения. Когда тема изменяется, все компоненты, использующие useContext(ThemeContext), автоматически перерисовываются с новым значением.

Заключение

И вот мы добрались до конца! Мы рассмотрели основы useContext в React. Давайте подведем основные моменты:

1. Context предоставляет способ передать данные через компонентное древо, избегая проп-дрилинга.
2. useContext – это хук, который позволяет нам легко consume Context в функциональных компонентах.
3. Чтобы использовать useContext, нам нужно сначала создать Context с помощью React.createContext.
4. Мы можем обновить Context, изменив значение prop провайдера компонента.

Помните, хотя Context и мощен, он не всегда是最好的 решением. Для простых пропсов, которые нужно передать только на один или два уровня, обычная передача пропов часто clearer. Считайте Context как особый соус на семейном ужине – используйте его, когда вам нужно что-то widely делиться, но не переборщите!

Надеюсь, это руководство помогло вам разгадать useContext. Продолжайте практиковаться, и вскоре вы станете профи в React Context! Счастливого кодирования!

Метод	Описание
React.createContext	Создает объект Context
useContext	Хук для consuming значения Context
<Context.Provider>	Компонент для предоставления значения Context своим детям

Credits: Image by storyset