Уведомление об исчезновении
Ага-ага, Я знаю. Я тоже ненавижу это, когда люди отказываются от серии учебных пособий в середине пути. Но из -за (захватывающего!) Обстоятельства, я сейчас называю это уходом.
Я думаю о том, чтобы просто сбросить ссылку на полное репо – это беспорядок, но это то, что вы, ребята, можете жевать, а не мои пустые обещания.
Если вы хотите, чтобы я бросил это здесь – дайте мне знать на hey@redcaptom.com.
И, просто сказал, что у меня был взрыв. Если вы что -то знаете – что -нибудь – о технологиях, найдите время, чтобы записать его в качестве учебного пособия. Вы получите такую большую ценность, вы даже не можете в это поверить.
Пока мы не встретимся снова – RCT:)
Видео (прокрутите вниз для статьи)
Вскоре!
Реагировать класс компонентов
Введение
Вообще говоря, вы можете ладить в большинстве простых приложений React, просто используя функциональные компоненты. Если вам нужно сохранить некоторые данные, которые изменяются во время выполнения приложения, например, вы можете использовать USESTATE Крюк Анкет Если вам нужно что -то сделать, когда компонент был добавлен, удален или обновлен из приложения, вы можете использовать Использоватьэффект Крюк Анкет
Но до реагирования 16,8 ( , который был выпущен в феврале 2019 г. ), крючки даже не были чем -то. Они стали доступны только после этого релиза, что означает, что до Февраль 2019 года вы не могли иметь состояние в функциональном компоненте или знать, что он установил или не размонтирован. На практике вы использовали функциональные компоненты для «простых» материалов и классовых компонентов для «сложных» вещей.
Это, очевидно, больше не так, но мне все еще нравится думать в этих терминах. Он предлагает взгляды на то, какие инструменты правильны для каждой работы, и не позволяет вам чрезмерно завершать вещи с компонентами класса, когда вы можете просто функционализировать (это слово?) Ваш путь к славе.
Классовые компоненты – тяжелые весы
Компоненты классов, с моей точки зрения, являются более тяжелой версией функциональных компонентов. Они предлагают более мелкозернистый контроль над компонентом и являются отличными как обертки функциональных компонентов, но по цене большей многословия, кривой высшего обучения и меньшего синтаксического сахара, чем функциональные компоненты. Давайте посмотрим, не так ли?
Примечание о занятиях в JavaScript
Я должен добавить быстрое заметку о том, что на самом деле находится в классе на земле JavaScript: это просто обертка вокруг существующих идей JavaScript, представленных таким образом, что это понравится объектно-ориентированным программистам. Положите ясно – JS классы это способ определить, что такое вещь, а затем создать события этой вещи в вашем приложении.
Это означает, что вы можете определить этот класс один раз, а затем использовать его (правильный термин «экземпляр» его) в любом месте в вашем приложении. На практике мы не делаем этого прямо В React – вы не создаете созданный вами компонент класса: React делает это для вас, когда он поднимает компонент. Конечно, вы можете повторно использовать компонент во многих местах вашего приложения, но вы также можете сделать это с функциональными компонентами, верно?
Это сбивает с толку, и на самом деле не очень актуально, если все, что вы пытаетесь получить, – это сцепление с тем, как реагировать похоже Таким образом, вы можете поднять его идеи по мере продвижения. Для нашего обсуждения, тогда я собираюсь отбросить все ссылки на JS Concept of the Class и вместо этого сосредоточиться на React Class Components Только. Если вам все еще интересно, Погрузитесь в документы – Они действительно хороши.
Как определить компонент класса React в дикой природе?
Общая структура
Отличный вопрос. Я собираюсь взять Пример из официальных документов React И объясните немного больше на каждой части, тогда они там делают (хотя, если вы пришли из объектно-ориентированного фона, вы, вероятно, уже знаете большую часть того, о чем я расскажу):
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
ReactDOM.render(
Этот класс отображает часы, которые отображают текущий час в HH: MM: SS формат на страницу. Давайте разберем его кусочком, начиная с виртуального рендеринга DOM:
ReactDOM.render(, document.getElementById('root') );
Мы видели это раньше, вот как мы размещаем компоненты на DOM. Давайте игнорируем это, поскольку размещение компонентов на виртуальном DOM одинаково в функциональных и классовых компонентах. Удаление его, оставляет нас с:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
Разбивка
Первой частью компонента является его определение – Классовые часы расширяются React. Компонент Анкет Это просто означает, что мы используем существующую вещь из React – Компонент Класс – как основа для нашего класса. Это позволяет использовать для создания нашего класса, основывая его на наборе функций, которые реагируют, предлагаемые в Компонент учебный класс. Двигаясь дальше:
constructor(props) {
super(props);
this.state = {date: new Date()};
}
A конструктор является специальной функцией, которая вызывается, когда класс создается – в нашем случае, когда компонент оценивается React, прежде чем помещать в DOM. реквизит атрибуты, которые мы видели, передавались компонентам в предыдущем примере – например в Maininfo компонент Участник имен Пропь имеет значение Том Анкет Причина, по которой мы передаем реквизит конструктору, заключается в том, что мы можем иметь доступ к ним внутри компонента – иначе мы не сможем узнать, что Участник имен было значение Том Когда компонент монтируется, например, нам трудно отобразить его на странице.
Супер (реквизит) это еще одна специальная функция, которая называет конструктор Верхний Класс наш класс смягчен из – т.е. Реагировать. Компонент Анкет Мы делаем это, чтобы убедиться, что концепция реквизита работает правильно в нашем компоненте класса, Как объяснено здесь Анкет
Наконец, this.state = {date: new Date ()} может быть отформатирован немного по -другому для лучшей разборчивости:
this.state =
{
date: new Date();
}
Что означает, что мы назначаем это – то есть наш класс Часы – Собственность под названием Государство (Да, как в usestate () крючок), это JavaScript объект который содержит одно поле свидание . Затем мы установили это поле, чтобы сдержать текущую дату ( new Date () Возвращает текущую дату и время). Итак, в основном мы делаем инициализацию состояния объекта одним элементом – текущее время.
Это общий шаблон в конструкторах класса. Затем мы можем изменить состояние, вызвав специальную функцию под названием setState () (Подробнее об этом Здесь – Он работает как функция обработчика от usESTATE () Мы видели в предыдущем разделе) и получают доступ к любым элементам в Государство класса с помощью это. X (Как в нашем примере – подробнее об этом ниже).
Двигаясь дальше:
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
Эта часть определяет, что делает компонент – то есть, как она выглядит при визуализации. render () и return () Части просто реагируют способ сказать – так будет выглядеть компонент при представлении. Интересная часть – JSX (мы говорили об этом ранее) между парарантами return () :
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
Это то, на что на самом деле будет выглядеть компонент – два заголовка, первый из которых статичен, а второй ссылается на дата Элемент в нашем Государство Анкет В частности, мы хотели бы извлечь время в часовом поясе пользователя, что и что date.tolocaletimeString () делает.
Фу, это было немного долго, но я надеюсь, что у вас есть хорошее представление о том, как выглядит компонент класса на практике. Я хотел бы сделать только последнюю заметку о методах жизненного цикла и записать это в зародыше:
Жизненный цикл RAGE Component
Мы собираемся добавить одну маленькую вещь в наш класс компонент – A Метод жизненного цикла :
componentDidMount() {
console.log("Clock has mounted, dude!");
}
Итак, наш полный компонент:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
console.log("Clock has mounted, dude!");
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
Все, что это делает, это зарегистрировать сообщение в консоли, когда наш компонент часов добавляется в DOM (то есть, когда оно находится в монтировании ). Этот тип методов позволяет нам иметь более тонкий контроль над тем, что происходит, когда изменяется статус нашего компонента. Почему это полезно, спросите вы? Для меня довольно сложно объяснить это из контекста полного применения. Мы увидим пример этого использования в последнем приложении, которое я строю в этой серии, но сейчас достаточно сказать, что действительно удобно знать, когда вступил компонент и покинул DOM.
Последние слова
Это все, что я должен сказать о самом реагировании в контексте этого учебника. Это только верхушка айсберга, так как React – несколько продвинутая рамка, но должна дать вам хотя бы некоторые Вступите в то, на что вы смотрите при чтении кода React. Я рекомендую вам купить Чистое реагирование Дэйва Седдия – Это научило меня большей части того, что я использую в своих приложениях, и парень все еще обновляет его сегодня! Привет, Дэйв, если ты читаешь это, спасибо за потрясающую книгу!:)
Оригинал: “https://dev.to/redcaptom/shopify-app-from-scratch-9-react-sidestep-3-5g7g”