Java, UX, HTML, CSS, WEB-design

Введение в контекстный API React

[ad_1]

  • Юсуф Фарук

  • 0 Комментарии

Введение в контекстный API React

  • 13 минут чтения

  • API, Реагировать, Приложения

Краткое резюме ↬

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

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

Согласно документам React:

Крючки являются новым дополнением в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса».

Это в основном то, что представляет собой хук React. Это позволяет нам использовать состояние, ссылки и другие функции React в наших функциональных компонентах.

Давайте обсудим два крючка, с которыми мы столкнемся в этой статье.

То useState Крюк

Хук useState позволяет нам использовать состояние в наших функциональных компонентах. А useState hook принимает начальное значение нашего состояния в качестве единственного аргумента и возвращает массив из двух элементов. Первый элемент — это наша переменная состояния, а второй элемент — это функция, в которой мы можем использовать обновление значения переменной состояния.

Давайте посмотрим на следующий пример:

import React, {useState} from "react";

function SampleComponent(){
   const [count, setCount] = useState(0);
}

Здесь, count наша переменная состояния, и ее начальное значение равно 0 пока setCount это функция, которую мы можем использовать для обновления значения count.

То useContext Крюк

Я расскажу об этом позже в статье, но этот хук в основном позволяет нам потреблять ценность контекста. Что это на самом деле означает, станет более очевидным позже в статье.

Пряжа Рабочие пространства

Рабочие пространства Yarn позволяют организовать кодовую базу проекта с помощью монолитного репозитория (monorepo). React — хороший пример проекта с открытым исходным кодом, который является монорепозиторием и использует рабочие пространства Yarn для достижения этой цели. Читать статью по теме →

Еще после прыжка! Продолжить чтение ниже ↓

Зачем нам нужен Context API?

Мы хотим создать компонент «переключатель тем», который переключается между светлым и темным режимами для нашего приложения React. Каждый компонент должен иметь доступ к текущему режиму темы, чтобы их можно было соответствующим образом стилизовать.

Обычно мы предоставляем текущий режим темы всем компонентам через реквизиты и обновляем текущую тему, используя state:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <Text theme= "blue" />
      <h1>{theme}</h1>
    </div>
  );
}

function Text({theme}) {
return(
  <h1 style = {{
     color: `${theme}`
  }}>{theme}</h1>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В приведенном выше примере кода мы создали текстовый компонент, который отображает h1 элемент. Цвет h1 элемент зависит от текущего режима темы. В настоящее время тема синяя. Мы можем переключаться между blue и red темы с использованием state.

Мы создадим состояние под названием «тема», используя useState крюк. То useState hook вернет текущее значение темы и функцию, которую мы можем использовать для обновления темы.

Итак, давайте создадим наше состояние темы:

const [theme, setTheme] = React.useState("blue");

Мы также добавим элемент кнопки в наш App компонент. Эта кнопка будет использоваться для переключения тем, и для нее требуется обработчик события щелчка. Итак, давайте напишем обработчик события клика так:

const onClickHandler = () => {
  setTheme();
}

Теперь мы хотим установить новую тему на Red если текущая тема Blue, и наоборот. Вместо использования if оператор, более удобный способ сделать это с помощью тернарного оператора в JavaScript.

setTheme( theme === "red"? "blue": "red");

Итак, мы написали наш onClick обработчик. Давайте добавим этот элемент кнопки в App компонент:

<button onClick = {onClickHandler}>Change theme</button>

Давайте также изменим значение реквизита темы компонента Text на состояние темы.

<Text theme={theme}/>

Теперь у нас должно быть это:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


function App() {
  const[theme, setTheme] = React.useState("red");

  const onClickHandler = () => {
  setTheme( theme === "red"? "blue": "red");
  }

  return (
    <div>
      <Text theme={theme}/>
      <button onClick = {onClickHandler}>Change theme</button>
    </div>
  );
}

function Text({theme}) {
return(
  <h1 style = {{
     color: `${theme}`
  }}>{theme}</h1>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Теперь мы можем переключаться между нашими двумя темами. Однако, если бы это было приложение гораздо большего размера, было бы сложно использовать тему в глубоко вложенных компонентах, а код стал бы громоздким.

Знакомство с контекстным API

Позвольте мне представить Context API. Согласно документации React:

«Контекст предоставляет способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне».

Для более глубокого определения он предоставляет способ сделать определенные данные доступными для всех компонентов в дереве компонентов, независимо от того, насколько глубоко вложенным может быть этот компонент.

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

const App = () => {
  return(
    <ParentComponent theme = "light"/>
  );
}

const ParentComponent = (props) => (
  <Child theme = {props.theme} />
)

const Child = (props) => (
  <Grandchild theme = {props.theme} />
)

const Grandchild = (props) => (
  <p>Theme: {props.theme}</p>
)

В приведенном выше примере мы указали тему приложения с помощью реквизита в ParentComponent называется theme. Нам пришлось передать этот реквизит всем компонентам вниз по дереву компонентов, чтобы получить его там, где он нужен, а именно GrandChild компонент. То ChildComponent не имел никакого отношения к тематическому реквизиту, а использовался просто как посредник.

А теперь представьте GrandChild компонент был более глубоко вложен, чем в верхнем примере. Нам пришлось бы передавать реквизиты темы так же, как мы это сделали здесь, что было бы громоздко. Это проблема, которая Context решает. С участием Context, каждый компонент в дереве компонентов имеет доступ к любым данным, которые мы решили поместить в наш контекст.

Давайте начнем с Context

Пришло время воспроизвести кнопку переключения тем, которую мы создали в начале статьи, с помощью Context API. На этот раз наш переключатель тем будет отдельным компонентом. Мы построим ThemeToggler компонент, который переключает тему нашего приложения React, используя Context.

Во-первых, давайте инициализируем наше приложение React. (я предпочитаю использовать create-react-app но вы можете использовать любой метод, который вы предпочитаете.)

После того, как вы инициализировали свой проект React, создайте файл с именем ThemeContext.js в вашей /src папка. Вы также можете создать папку с именем /context и поместите свой ТемаКонтекст файл там, если вы хотите.

Теперь давайте двигаться дальше.

Создание вашего контекстного API

Мы создадим наш контекст темы в нашем ThemeContext.js файл.

Для создания контекста мы используем React.createContext который создает объект контекста. Вы можете передать что угодно в качестве аргумента React.createContext. В этом случае мы собираемся передать строку, которая является текущим режимом темы. Итак, теперь наш текущий режим темы — это «светлый» режим темы.

import React from "react";

const ThemeContext = React.createContext("light");
export default ThemeContext;

Чтобы сделать этот контекст доступным для всех наших компонентов React, мы должны использовать Provider. Что такое провайдер? Согласно документации React, каждый объект контекста поставляется с компонентом Provider React что позволяет потребляющим компонентам подписываться на изменения контекста. Именно поставщик позволяет использовать контекст другими компонентами. Тем не менее, давайте создадим нашего провайдера.

Перейти к вашей App.js файл. Чтобы создать нашего провайдера, мы должны импортировать наш ThemeContext.

Однажды ThemeContext был импортирован, мы должны приложить содержимое нашего App компонент в ThemeContext.Provider теги и дать ThemeContext.Provider компонент реквизит называется value который будет содержать данные, которые мы хотим сделать доступными для нашего дерева компонентов.

function App() {
  const theme = "light";
  return (
    <ThemeContext.Provider value = {theme}>
      <div>
      </div>
    </ThemeContext.Provider>
  );
}

Итак, теперь значение «light» доступно для всех наших компонентов (о которых мы скоро напишем).

Создание нашего файла темы

Теперь мы создадим файл нашей темы, который будет содержать разные значения цвета для светлой и темной тем. Создайте файл в своем /src папка с именем Цвета.js.

В Цвета.js, мы создадим объект с именем AppTheme. Этот объект будет содержать цвета для наших тем. Когда вы закончите, экспортируйте AppTheme объект так:

const AppTheme = {
    light: {
        textColor: "#000",
        backgroundColor: "#fff"
    },
    dark: {
        textColor: "#fff",
        backgroundColor: "#333"
    }
}

export default AppTheme;

Теперь пришло время приступить к созданию различных компонентов React.

Создание наших компонентов React

Создадим следующие компоненты:

  • Header
  • ThemeToggler
  • MainWithClass

Заголовок.jsx

import React from "react";
import ThemeToggler from "./ThemeToggler";

const headerStyles = {
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
}
const Header = () => {
    return(
        <header style = {headerStyles}>
            <h1>Context API</h1>
            <ThemeToggler />
        </header>
    );
}

export default Header;

ThemeToggler.jsx

(Пока что мы просто вернем пустой div.)

import React from "react";
import ThemeContext from "../Context/ThemeContext";

const themeTogglerStyle = {
    cursor: "pointer"
}
const ThemeToggler = () => {
        return(
            <div style = {themeTogglerStyle}>
            </div>
    );
}

export default ThemeToggler;

Использование контекста с компонентами на основе классов

Здесь мы будем использовать значение нашего ThemeContext. Как вы уже знаете, у нас есть два метода написания компонентов в React: через функции или классы. Процесс использования контекста в обоих методах отличается, поэтому мы создадим два компонента, которые будут служить основным разделом нашего приложения: MainWithClass и MainWithFunction.

Давайте начнем с MainWithClass.

MainWithClass.jsx

Нам придется импортировать наш ThemeContext и AppTheme. Как только это будет сделано, мы напишем класс, который возвращает наш JSX из метода рендеринга. Теперь нам нужно использовать наш контекст. Есть два способа сделать это с компонентами на основе классов:

  1. Первый способ через Class.contextType.

    Чтобы использовать этот метод, мы назначаем объект контекста из нашего ThemeContext к contextType свойство нашего класса. После этого мы сможем получить доступ к значению контекста, используя this.context. Вы также можете ссылаться на это в любом из методов жизненного цикла и даже в методе рендеринга.

    import React, { Component } from "react";
    import ThemeContext from "../Context/ThemeContext";
    import AppTheme from "../Colors";
    
    class Main extends Component{
        constructor(){
            super();
        }
        static contextType = ThemeContext;
        render(){
            const currentTheme = AppTheme[this.context];
            return(
                <main></main>
            );
        }
    
    }
    

    После назначения ThemeContext к contextType свойство нашего класса, я сохранил текущий объект темы в currentTheme Переменная.

    Теперь мы возьмем цвета из currentTheme переменную и использовать их для оформления некоторой разметки.

    render() {
            const currentTheme = AppTheme[this.context];
            return (
                <main style={{
                    padding: "1rem",
                    backgroundColor: `${currentTheme.backgroundColor}`,
                    color: `${currentTheme.textColor}`,
    
                }}>
                    <h1>Heading 1</h1>
                    <p>This is a paragraph</p>
                    <button> This is a button</button>
                </main>
    

    Вот и все! Однако этот метод ограничивает использование только одного контекста.

  2. Второй метод ThemeContext.Consumer который включает в себя использование Consumer. Каждый объект контекста также поставляется с компонентом Consumer React, который можно использовать в компоненте на основе классов. Компонент-потребитель принимает дочерний элемент как функцию, и эта функция возвращает узел React. Текущее значение контекста передается этой функции в качестве аргумента.

    Теперь давайте заменим код в нашем MainWithClass компонент с этим:

    class Main extends Component {
        constructor() {
            super();
            this.state = {
            }
        }
        render(){
                   return(
                        <ThemeContext.Consumer>
                       {
                        (theme) => {
                            const currentTheme = AppTheme[theme];
                            return(
                                <main style = {{
                                    padding: "1rem",
                                    backgroundColor: `${currentTheme.backgroundColor}`,
                                    color: `${currentTheme.textColor}`,
                                
                                }}>
                                    <h1>Heading 1</h1>
                                    <p>This is a paragraph</p>
                                    <button> This is a button</button>
                                </main>
                            )
                           
                        }
                    }
                </ThemeContext.Consumer>
            );
        }
    
    }
    

    Как видите, мы использовали текущее значение нашего ThemeContext которую мы назвали «тема», и мы взяли значения цвета для этого режима темы и присвоили их переменной currentTheme. С помощью этого метода вы можете использовать несколько потребителей.

Это два метода использования контекста с компонентами на основе классов.

Использование контекста с функциональными компонентами

Использование контекста с функциональными компонентами проще и менее утомительно, чем с компонентами на основе классов. Чтобы использовать контекст в функциональном компоненте, мы будем использовать хук с именем useContext.

Вот что потребляет наш ThemeContext с функциональным компонентом будет выглядеть так:

const Main = () => {
    const theme = useContext(ThemeContext);
    const currentTheme = AppTheme[theme];
    return(
        <main style = {{
            padding: "1rem",
            backgroundColor: `${currentTheme.backgroundColor}`,
            color: `${currentTheme.textColor}`,
        
        }}>
            <h1>Heading 1</h1>
            <p>This is a paragraph</p>
            <button> This is a button</button>
        </main>
    );
}

export default Main;

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

Примечание: Вы должны использовать эти различные компоненты в файле App.js, чтобы увидеть результаты.

Обновление нашей темы с помощью ThemeToggler Компонент

Теперь мы будем работать над нашим ThemeToggler компонент. Нам нужно иметь возможность переключаться между светлой и темной темами. Для этого нам нужно отредактировать наш ThemeContext.js. Наш React.createContext теперь будет принимать объект, напоминающий результат useState крючок как аргумент.

const ThemeContext = React.createContext(["light", () => {}]);

Мы передали массив в React.createContext функция. Первый элемент массива — это текущий режим темы, а второй элемент — это функция, которая будет использоваться для обновления темы. Как я уже сказал, это просто напоминает результат useState крючок, но это не совсем результат useState крюк.

Теперь мы будем редактировать наш App.js файл. Нам нужно изменить значение, переданное провайдеру, на useState крюк. Теперь значение нашего контекста темы равно useState крючок, значение по умолчанию которого «легкий».

function App() {
  const themeHook = useState("light");
  return (
    <ThemeContext.Provider value = {themeHook}>
      <div>
        <Header />
        <Main />
        
      </div>
    </ThemeContext.Provider>
  );
}

Написание нашего ThemeToggler Компонент

Давайте теперь на самом деле напишем наш ThemeToggler компонент:

import React,{useContext} from "react";
import ThemeContext from "../Context/ThemeContext";

const themeTogglerStyle = {
    cursor: "pointer"
}
const ThemeToggler = () => {
    const[themeMode, setThemeMode] = useContext(ThemeContext);
    return(
        <div style = {themeTogglerStyle} onClick = {() => {setThemeMode(themeMode === "light"? "dark": "light")}}>
            <span title = "switch theme">
                {themeMode === "light" ? "🌙" : "☀️"}
            </span>
        </div>
    );
}

export default ThemeToggler;

Поскольку значение контекста нашей темы теперь является ловушкой всякий раз, когда мы вызываем useContext на нем он вернет массив. Используя деструктурирование, мы смогли получить элементы из массива. Затем мы написали onClick обработчик событий для нашего ThemeToggler. С этим кодом всякий раз, когда нажимается переключатель темы, он переключает тему нашего приложения.

Теперь мы будем редактировать разные версии нашего Main компонент.

Редактирование нашего MainWithClass Компонент

  1. Версия MainWithClass компонент, использующий Class.contextType метод:
    import React, { Component } from "react";
    import ThemeContext from "../Context/ThemeContext";
    import AppTheme from "../Colors";
    
    class Main extends Component{
        constructor(){
            super();
        }
        static contextType = ThemeContext;
        render(){
            const currentTheme = AppTheme[this.context[0]];
            return(
                <main style={{
                    padding: "1rem",
                    backgroundColor: `${currentTheme.backgroundColor}`,
                    color: `${currentTheme.textColor}`,
    
                }}>
                    <h1>Heading 1</h1>
                    <p>This is a paragraph</p>
                    <button> This is a button</button>
                </main>
    
            );
        }
    
    }
    
  2. Версия MainWithClass компонент, использующий ThemeContext.Consumer метод:
    import React, { Component } from "react";
    import ThemeContext from "../Context/ThemeContext";
    import AppTheme from "../Colors";
    
    class Main extends Component {
        constructor() {
            super();
            this.state = {}
        }
        render() {
            return (
                <ThemeContext.Consumer>
                    {
                        ([theme]) => {
                            const currentTheme = AppTheme[theme];
                            return(
                                <main style = {{
                                    padding: "1rem",
                                    backgroundColor: `${currentTheme.backgroundColor}`,
                                    color: `${currentTheme.textColor}`,
                                
                                }}>
                                    <h1>Heading 1</h1>
                                    <p>This is a paragraph</p>
                                    <button> This is a button</button>
                                </main>
                            )
                           
                        }
                    }
                </ThemeContext.Consumer>
            );
        }
    
    }
    export default Main;
    

Редактирование нашего MainWithFunction Компонент

То MainWithFunction Компонент должен быть отредактирован следующим образом:

import React, { useContext } from "react";
import ThemeContext from "../Context/ThemeContext";
import AppTheme from "../Colors";


const Main = () => {
    const theme = useContext(ThemeContext)[0];
    const currentTheme = AppTheme[theme];
    return(
        <main style = {{
            padding: "1rem",
            backgroundColor: `${currentTheme.backgroundColor}`,
            color: `${currentTheme.textColor}`,        
        }}>
            <h1>Heading 1</h1>
            <p>This is a paragraph</p>
            <button> This is a button</button>
        </main>
    );
}

export default Main;

Вывод

Вот и все! Нам удалось реализовать два режима темы для нашего приложения React с помощью Context API.

В процессе мы узнали:

  • Что такое Context API и какие проблемы он решает;
  • Когда использовать Context API;
  • Создание Context и потребляя его как в функциональных, так и в классовых компонентах.

Дальнейшее чтение на SmashingMag:

  • Стилизация в современных веб-приложениях
  • Создание мобильных приложений с помощью Ionic и React
  • Создайте PWA с помощью Webpack и Workbox
  • Знакомство с MutationObserver API
Сокрушительная редакция
(дм, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Введение в контекстный API React

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Введение в контекстный API React

Название: Введение в контекстный API React . Краткое описание: [ad_1] ⭐ Юсуф Фа . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»