От автора: в мире, где есть много разных интерфейсных фреймворков, всегда трудно понять, какой из них выбрать. Использовать популярный Angular? Или изучить VueJS будет полезно для моей базы знаний?
Также у нас есть ReactJS, фреймворк, созданный Facebook, который, похоже, штурмует все новые вершины в мире разработки интерфейсов. Используя компоненты, виртуальный DOM и JSX (об этом в другой статье!), React, похоже, становится все более мощным. Недавно в React 16.3 был введен новый React Context API, как: Способ передачи данных через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.
Звучит здорово! А что на практике.
Свойство и состояние
В React у вас есть свойства и состояния. Две очень важные для понимания вещи. Свойства — это данные, которые передаются компоненту из родительского компонента.
Состояние — это данные, которые управляются внутри компонента. Итак, если каждый компонент имеет свое собственное состояние, как мы можем делиться этой информацией с другим компонентом? Вы можете использовать реквизиты, но реквизиты могут передаваться только между родительскими и дочерними компонентами.
Что нам делать, если у нас есть много уровней компонентов, которые передают только один бит информации? Это также известно, как сквозная передача свойства.
Сквозная передача свойств (решение Context API)
Давайте рассмотрим пример поддержки сквозной передачи свойств, чтобы мы могли понять, что делает Context API. В этом примере мы увидим, как передавать информацию от одного компонента к дочернему компоненту, а затем к дочернему компоненту этого компонента.
const Lowest = (props) => ( <div className="lowest">{props.name}</div>
) const Middle = (props) => ( <div className="middle"> <Lowest name={props.name} /> </div>
) class Highest extends Component { state = { name: "Context API" } render() { return <div className="highest"> {this.state.name} <Middle name={this.state.name} /> </div> }
}
Я знаю, что именование является условным, но оно помогает продемонстрировать способность контекста перейти к вложенным компонентам. Более реалистичным сценарием является тот, который имеет место на Scotch с карточками: CardGrid -> CardContent -> CardFooter -> LikeButton.
Вернемся к нашему примеру, вот как будут вложены компоненты Highest -> Middle -> Lowest:
<Highest> <Middle> <Lowest> {/* we want our content here but dont want to prop pass ALLLL the way down ! */} </Lowest> </Middle> </Highest>
Обратите внимание, что для того, чтобы Highest и Lowest общались, им нужен Middle. Хорошо, и вот у нас есть React Context, который может позаботиться об этом.
Context API React
React позволяет нам иметь состояние, которое можно видеть глобально для всего приложения. Мы начинаем с провайдера контекста (<Provider/>), чтобы определить данные, которые хотим отправлять, и нам нужен потребитель контекста (<Consumer/>), который захватывает эти данные и использует их там, где вызывается.
В Context теперь у вас есть возможность объявить состояние один раз, а затем использовать эти данные через потребителя контекста в любой части приложения. Звучит невероятно, не так ли? Хорошо, давайте посмотрим, как мы можем задать это в простом приложении React. Давайте построим его!
Создание передачи имени с помощью Context API
Мы создадим простое приложение React. Давайте построим приложение, которое передает имя от одного компонента к другому компоненту, который просто не будет дочерним компонентом! Отлично! У нас будет три разных уровня: один будет высшим компонентом, который содержит имя, сохраненное в состоянии, у нас будет средний компонент, а затем у нас будет самый низкий компонент.
Наше приложение отправит имя в состоянии от наивысшего самому низкому компоненту без необходимости взаимодействовать со средним компонентом. Откройте редактор кода по своему усмотрению, и давайте начнем кодирование!
Для приложения нам понадобится зависимость react. Добавляем ее к нашим зависимостям или, если вы работаете в текстовом редакторе, выполните следующие шаги для ее установки
Установите npm глобально на компьютере, если он еще не установлен.
npm install —save react
Проверьте зависимость react для package.json.
В главном файле js происходит магия. Всякий раз, когда мы создаем приложение React, вам всегда нужно импортировать зависимости, иначе этот файл не будет знать, как использовать его. Поэтому в верхней части файла index.js давайте импортируем то, что нам нужно.
import React, { Component } from 'react';
Теперь перейдем к компоненту. Мы хотим объявить наш контекст в переменной для читаемости. Давайте сделаем следующее:
const AppContext = React.createContext()
Уровни компонентов
Компонент Highest будет содержать состояние. Состояние будет содержать имя, которое мы хотим передать самому младшему компоненту без необходимости взаимодействовать со средним компонентом.
class Highest extends Component { state = { name : “React Context API”, } render() { return ( <AppContext.Provider value={this.state}> {this.props.children} </AppContext.Provider> ) }
}
Мы построим дочерний компонент так, чтобы он так вызывался в среднем компоненте:
const Middle = () => ( <div> <p>I’m the middle component</p> <Lowest /> </div> )
И дочерний компонент, который будет называться Lowest:
const Lowest = () => ( <div> <AppContext.Consumer> {(context) => context.name} </AppContext.Consumer> </div>
)
Давайте рассмотрим этот код. Вы видите, что у нас есть состояние в высшем компоненте, мы хотим передать его самому низкому. У нас есть статическое свойство, которое позволяет нам объявить, каким мы хотим, чтобы был наш контекст. В нашем случае это имя «React Context API».
Provider содержит эти данные, поэтому, когда они потребляются другим компонентом, он знает, что ему передать. В компоненте Lowest у нас есть Consumer, который хочет получить эти данные, не передавая его первому компоненту. Этот компонент вместо этого просто заявляет, что Lowest — это его дочерний элемент.
Когда не использовать контекст
Для простого решения сквозной передачи свойств контекст отлично подходит! Для приложений большего масштаба, которые имеют несколько (и более сложных) состояний, редукторов и т. д., Redux возможно, будет лучшим решением.
Нет необходимости использовать контекст во всем приложении, делая вещи слишком запутанными. Будьте находчивы, используйте контекст не просто, чтобы писать меньше кода.
Заключение
React Context API — это отличный инструмент. Но не используйте его, если вы не уверены, что это будет полезно для вас и вашего кода. Redux может также делать отличную работу. Старайтесь избегать сквозной передачи свойств, и узнайте, что что-то вроде контекста поможет вам в этом. Это отличная альтернатива!
Если вы хотите посмотреть весь мой код, он доступен здесь! Надеюсь, вам понравилась эта статья, и вы узнали много полезного о контексте React. Теперь попробуйте создать собственный код и посмотрите, насколько он действительно может быть сильным.
Автор: Sarah Jorgenson
Источник: https://scotch.io/
Редакция: Команда webformyself.