Итак, вы хотите изучить React? Это довольно устрашающая идея, не так ли? Независимо от того, какой у вас опыт, React позиционирует себя в авангарде серьезного изменения парадигмы в контексте Web 2.0. Дни jQuery прошли, дни хрупких фреймворков сочтены.

Что это значит? Что ж, чтобы идти в ногу со временем, мы, инженеры, должны быть на переднем крае. React, наряду с Vue, находится на переднем крае разработки Javascript, а это означает, что если вы хотите добиться прогресса, вы должны быть на передовой рядом с ними.

Без страха! Вот почему я пишу эту статью. Я сделаю все возможное, чтобы объяснить React и его концепции как можно проще. Не заблуждайтесь, лучший способ осмыслить React - это испачкать им руки.

Я обнаружил, что по большей части статьи просто теряют вас в сложности всего, поэтому, надеюсь, эта статья будет делать наоборот.

Мы займемся:

  1. Зачем использовать React в проекте?
  2. Что на самом деле делает React?
  3. Объяснение парадигм React

1. Зачем использовать React в проекте?

Хороший вопрос. Часто React используется в проекте просто для того, чтобы инженеры проекта могли сказать: «Мы использовали React в проекте» - давайте не будем вдаваться в этот шаблон.

Как бы вы ответили мне, если бы я спросил вас: «Зачем вам использовать Ember или Backbone в проекте?» Я уверен, что у вас были бы конкретные причины. Как и большинство вещей, связанных с программированием, когда дело доходит до использования сторонних библиотек для выполнения тяжелой работы за вас, это тот случай, когда требуется тяжелая работа. Вот несколько практических правил:

React подходит для:

  • Веб-сайты с интенсивным пользовательским интерфейсом (пользовательское взаимодействие) (банковские интерфейсы, информационные панели, пользовательские потоки персонализации, электронная коммерция и т. Д.) - подумайте о множестве движущихся частей, большом количестве данных, которые необходимо управлять взаимосвязанным образом
  • Когда потребность в производительности превышает срок
  • Приложения, использующие React Native - большой предмет для обсуждения. Мы не будем здесь вдаваться в подробности, по сути, если вы изучите React, имея немного больше опыта, вы сможете перенести эти знания на создание мобильных приложений с гораздо более компактным барьером для входа.
  • Виджеты, которые выиграют от управления состоянием и производительности, например календари, карусели, слайдеры, формы и т. Д.

Нельзя сказать, что вы не могли использовать React для нижеперечисленного, но на самом деле это будет только справедливо:

  • Ваш блог
  • Информационный сайт вашей компании.

Очевидно, что есть исключения из вышеизложенного, но если вы когда-либо сомневаетесь, просто обратитесь к веб-сайту ReactJS, где они четко заявляют (без каламбура):

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

По своей сути, React действительно обеспечивает эффективное управление изменениями. Ваша компания О странице не нуждается в этом, поверьте мне.

Что на самом деле делает React?

Прежде всего, важно отметить, что React не похож на Angular. Так что хватит сравнивать эти два. Если вы страдаете от усталости фреймворка, ваш выбор действительно стоит между Vue и React. Я не буду спорить о преимуществах этих двух функций, поскольку чувствую, что устал от фреймворков и выбрал React.

Так чем же React отличается от JavaScript, который браузер уже понимает? Что ж, в то время как ванильный Javascript занимается фактическим манипулированием DOM, который генерирует браузер, React заботится о том, чтобы не отображать затем всю DOM при каждом изменении данных.

Как мне объяснить это более ясно? Что ж, помните, что DOM (объектная модель документа) - это, по сути, один большой объект, верно? Javascript хорош с обработкой объектов, но здесь мы говорим о действительно сложном объекте. Каждый раз при изменении данных воссоздается вся DOM. Это довольно дорогое мероприятие.

Вы можете подумать: да, мой виджет обратного отсчета не окажет такого большого влияния на производительность моего сайта. Что более чем вероятно правильно, но что, если вашему виджету обратного отсчета нужно было разговаривать с другими братьями и сестрами, родительскими и дочерними компонентами и передавать данные назад и вперед, изменяя данные, когда пользователи выполняли определенные действия?

Само по себе это утверждение было довольно запутанным и запутанным. А теперь представьте, что DOM все это время перерисовывает себя, чтобы обеспечить надлежащее взаимодействие с пользователем? Все, что вы на самом деле делаете на этом этапе, - это израсходуйте ресурсы вашего компьютера. Войдите в React.

Прежде чем продолжить, давайте убедимся, что понимаем это:

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

Отлично, теперь React работает совсем по-другому. Вместо повторного рендеринга всей модели DOM React создает виртуальную модель DOM. Какие? Ага, виртуальный DOM. Это означает, не вдаваясь в подробности, что React обновляет только те части DOM, где вы, как инженер, сказали ему обновить свои данные.

Таким образом, вместо повторного рендеринга всей модели DOM каждый раз, когда происходит какое-либо взаимодействие с пользователем, React просто повторно выполняет рендеринг компонента или его части.

Обобщить:

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

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

2. Объяснение парадигм React

Сейчас, наверное, время для кофе-брейка, потому что этот раздел станет серьезным. Мы можем разбить парадигмы React на несколько разделов:

🔖 JSX

Многие инженеры думают, что JSX - это разновидность языка разметки: это так, и это не так. JSX просто делает React более элегантным. Это избавляет нас от необходимости записывать раздутые вызовы функций, когда мы хотим использовать компонент в нашем приложении. Поскольку веб-инженеры, знакомые с синтаксисом HTML, делают JSX ближе к себе. Кроме того, возможность использовать реквизиты, такие как атрибуты HTML, упрощает процесс обучения.

⚡️ Жизненный цикл

Очень важно понимать жизненный цикл компонентов React. У компонентов с отслеживанием состояния есть методы, которые мы можем использовать для обновления состояния. Они вызываются на разных этапах жизненного цикла. Обычно мы можем разбить их на три группы: Монтирование, Обновление и Размонтирование. Помните Virtual DOM, о котором мы говорили? Что ж, эти методы жизненного цикла относятся непосредственно к тому, когда ваши компоненты отображаются в виртуальной модели DOM.

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

Монтаж

конструктор: вызывается перед монтированием компонента.

  • Установить начальный state
  • Привязать обработчики событий
  • Инициализировать React refs

componentDidMount: вызывается сразу после монтирования компонента в виртуальной модели DOM.

  • Здесь вы можете выполнять вызовы API, используя библиотеку типа fetch или axios
  • Используйте super(props) перед написанием любых других операторов, иначе this.props будет неопределенным. См. Таблицы ниже.

Обновление

render: единственный обязательный метод в компоненте Stateful React (class)

  • Не изменяйте state в этом методе - другими словами, мы хотим сохранить чистые state и props (без обновления / изменения) на этом этапе.

componentDidUpdate: вызывается сразу после обновления.

  • Здесь вам нужно проверить, совпадают ли реквизиты до обновления с реквизитами после обновления.

Размонтирование

componentWillUnmount: вызывается перед размонтированием компонента.

  • Удалить обработчики событий
  • Отменить / закрыть сетевые запросы
  • Не используйте setState

🍰 Компоненты

Компоненты - это строительные блоки React. Один из основных сдвигов в сознании, когда вы начинаете использовать React, - это думать о том, как ваше приложение реализует компоненты. Надуманный пример - это форма:

Обратите внимание, как мы используем JSX для рендеринга компонентов? Также обратите внимание на то, что, хотя это может не выглядеть как действительная структура HTML, на самом деле это не HTML, пока он не отрисован в DOM. Компонент <Input />, например, может содержать <label> и другую разметку. Это сохраняет наш родительский компонент чистым и легким для понимания. Мы с легкостью можем раздавать здесь реквизит.

Вы получаете разные типы компонентов.

Компоненты с отслеживанием состояния: используют class синтаксис и позволяют использовать методы и состояние жизненного цикла React.

Функциональные компоненты без сохранения состояния. Это статические компоненты, иначе называемые «глупыми» компонентами, которые могут использовать props. Они предназначены больше для демонстрации, чем что-либо еще, и не могут использовать методы жизненного цикла. Вы заметите, что они также хранятся в const, а не в class

PureComponents: Чистые компоненты более производительны, чем компоненты с отслеживанием состояния, с той лишь разницей, что вы не можете использовать shouldComponentUpdate(), поскольку чистые компоненты не изменяются state или props.

🔩 Реквизит

Компоненты могут принимать props или свойства, если вы не понимаете, от чего сокращение props. Вы можете передавать типы данных (int, _24 _, _ 25_, function, boolean) в props как значения. Props могут быть любыми данными, которые вы хотите включить в компонент, например:

📢 Штат

Государство ускользает от многих новичков в React. Инженеры часто путаются между тем, что считается state, и тем, что считается props. Есть довольно большие различия. По сути, state - это просто object. Этот object определяет, как компонент отрисовывается и ведет себя. state также может быть обновлен некоторыми events, например click или submit.

state - это не новая концепция в веб-разработке. Вы видите надуманные примеры по всему Интернету: модальные окна, раскрывающиеся списки, вкладки и аккордеоны имеют state. Модальное окно может быть open или closed, поэтому оно имеет state.

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

React предоставляет нам специальный метод под названием setState, который позволяет нам обновлять состояние динамическим и неразрушающим образом. См. Суть ниже:

Как видите, мы используем setState, чтобы установить состояние isOpen, противоположное текущему состоянию, этот метод привязан к событию щелчка на button.

Из-за характера работы React мы используем isOpen в тернарном операторе, чтобы решить, должен ли модальный класс иметь добавленный класс active (учитывая, что активный класс имеет правильный CSS для открытия нашего модального окна) - хотя это простой пример, он демонстрирует, как вы подойдете к использованию state в приложении React, и как он делает создание взаимодействия с пользователем невероятно мощным.

Что нужно знать о state, это то, что вы не можете обновить его напрямую. Так что делать что-то вроде этого: this.state.isOpen = false запрещено. Всегда используйте setState, когда дело доходит до обновления state.

🚕 События

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

Здесь мы используем компонент с отслеживанием состояния, так как нам нужно включить некоторые методы событий, чтобы сообщить React, что делать при отправке формы. Обратите внимание, что простого добавления метода класса недостаточно. Нам нужно убедиться, что мы привязываем this, иначе React не узнает, что мы имеем в виду экземпляр этого класса компонента.

Если вы не хотите использовать этот подход, вы также можете сделать что-то вроде этого: <form onSubmit={() => this.handleSubmit()}> - при этом this внутренне связан, поэтому нет необходимости делать это в методе constructor.

Заключение

Я надеюсь, что эта статья дала вам общее представление о некоторых внутренних механизмах React. Реагировать очень сложно, и я почти не прикоснулся к ней. Следите за некоторыми из моих предстоящих статей, в которых мы рассмотрим некоторые из Reacts API.