Вы должны использовать React Context API

Часто забытый сводный брат реквизита и редукса.

В этой статье будут рассмотрены:

Что такое React Context API
Когда следует использовать React Context API
Основы контекстного API
Почему вы должны использовать React Context API
Почему вам НЕ следует использовать React Context API

Что такое контекстный API React?

React Context API — это новая функция, добавленная в версию 16.3 React, которая позволяет разработчикам передавать данные между многими компонентами без использования реквизита. В документации React говорится, что она …предназначена для обмена данными, которые можно считать «глобальными для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочитаемый язык».

Когда я впервые начал изучать React, меня никогда не учили, как использовать React Context API. Мои курсы в колледже едва охватывали основы React, поэтому я взял его в свои руки и купил курс Udemy за 10 долларов, чтобы лучше понять популярный фреймворк. Даже курс Udemy, который я купил, не упоминал React Context API. Хуже того, когда я закончил колледж и начал работать полный рабочий день, используя React каждый божий день, React Context API ни разу не упоминался.

Хотя React Context API — это то, о чем часто забывают, у него есть много преимуществ.

Когда использовать контекстный API?

Основная цель Context API — когда разработчику необходимо сделать данные доступными для нескольких разных компонентов на разных уровнях вложенности. React Context API может помочь разработчику избежать «разбора свойств», когда свойства передаются вниз по дереву компонентов через компоненты, которым на самом деле не нужны данные, но нужны их дочерним компонентам.

Так почему бы просто не использовать Redux?

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

`React.createContext`

Создайте файл контекста «src/theme-context.js». Вы можете назвать свой контекст как угодно. Я всегда маркирую свой, связанный с его использованием.

Затем создайте объект контекста, аналогичный приведенному ниже коду.

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

`Context.Provider`

Каждый объект контекста, который вы создаете, также должен иметь компонент Provider. Это позволит потребляющим компонентам «наблюдать» и повторно отображать, когда происходят какие-либо изменения в свойстве Provider value.

import ThemeContext from './ThemeContext';

class ThemeProvider extends Component {
    state = {
        themes: {
            lightTheme: { background: '#EFF9DA', active: false},
            darkTheme: { background: '#444444', active: true },
            normalTheme: { background: '#C75BB5', active: false}
         };
    };

    render() {
        return (
            <ThemeContext.Provider value={{...this.state}}
                
                {this.props.children}
            </ThemeContext.Provider>
        );
    };
};
export default ThemeProvider;

`Class.contextType`

ContextType используется для использования контекста (например, ThemeContext). Это позволяет вам получить доступ к ближайшему текущему значению контекста. Для этого см. пример ниже. Вы должны использовать «this.context». Его можно использовать в любом из методов жизненного цикла в React, таких как render() и componentDidMount();

ПРИМЕЧАНИЕ. С помощью этого свойства API вы можете получить доступ только к одному контексту.

export class ThemeClass extends Component {
  static contextType = ThemeContext;
  render() {
    let value = this.context;
    /* render something based on the value - this can be a list,        card, simple text, an image, etc */
  };
};

`Context.Consumer`

Включите context.consumer внутрь компонента, который вы хотите «наблюдать». Затем добавьте контекст так же, как вы добавляете реквизиты.

«Значение» — это состояние, которое вы передали в Provider.

function MyFunction() {
  return (
    <ThemeContext.Consumer>
      {value => /* render your state here*/}
    </ThemeContext.Consumer>
  );
};

`Context.displayName`

Context.displayName — это просто то, что вы хотите, чтобы ваш контекст отображался, как в Инструментах разработчика React. Это должна быть строка.

Если вы еще не используете инструменты разработчика React, я настоятельно рекомендую их загрузить. Это расширение в Chrome, которое помогает отлаживать React.

const ThemeContext = React.createContext();
ThemeContext.displayName = 'ThemeContext';
<ThemeContext.Provider> // Will show as "ThemeContext.Provider" 
<ThemeContext.Consumer> // Will show as "ThemeContext.Consumer"

Почему вы должны использовать React Context API?

Когда разработчик изучает React, он обычно изучает props и сразу переходит к Redux. React Context API — это то, о чем часто забывают, но у него есть много преимуществ.

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

Это также помогает использовать React Context API, когда вам нужен посредник между использованием props и redux. И props, и redux — отличные инструменты, если их правильно использовать.

Как я упоминал ранее, если вы новичок в редукции, вам тоже может быть сложно научиться. Я смог научиться использовать redux только с помощью React Redux Toolkit. Иногда избыточность может быть излишней, особенно для небольших приложений. Установка слишком большого количества библиотек, когда они вам не нужны, может снизить скорость ваших приложений. Не то чтобы сама по себе избыточность вредила производительности вашего приложения, но лучше всего по возможности сохранять размер вашего приложения небольшим.

Почему вам НЕ следует использовать React Context API?

Как и любой другой инструмент, React Context API следует использовать только тогда, когда это необходимо.

В Документации React написано: Контекст в основном используется, когда некоторые данные должны быть доступны для многих компонентов на разных уровнях вложенности. Применяйте его с осторожностью, потому что это затрудняет повторное использование компонентов.

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

Вывод

На протяжении всего этого поста я полностью убедил вас в том, что вам следует использовать React Context API (шутка), когда следует использовать и не следует использовать React Context API, и как его использовать на базовом уровне.

Мы рассмотрели React.createContext, context.Provider, class.contextType, context.Consumer и, наконец, context.displayName.

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

Если вы еще не являетесь участником Medium, вот ссылка для регистрации.

Сначала я скептически относился к тому, сколько я действительно буду использовать Medium после оплаты 5 долларов за каждый месяц, а затем я получил бесплатную пробную версию. Оказывается, я часто им пользуюсь!

Если вы зарегистрируетесь по ссылке, которую я предоставил выше, я получу небольшую часть от нее.

Вы должны использовать React Context API

В этой статье будут рассмотрены:

Что такое контекстный API React?

Когда использовать контекстный API?

React.createContext

Context.Provider

Class.contextType

Context.Consumer

Context.displayName