Библиотека
React известна, как мощное средство для создания динамических и интерактивных
пользовательских интерфейсов. Библиотека изобретена для создания одностраничных
и мобильных приложений (React Native) Вот ее главные характеристики и
преимущества:
1)
Декларативный
2)
Virtual DOM
3)
JSX
4)
State
Декларативное
программирование — это парадигма программирования, в которой задаётся
спецификация решения задачи: описывается, что представляет собой проблема и
ожидаемый результат, но без описания способа достижения этого результата.
Декларативное
программирование может являться более сложным в понимании, но позволяет писать
более безопасный и поддерживаемый код, который можно легко распараллелить, то
есть достаточно описать код, как части интерфейса приложения выглядят в разных
состояниях и React будет своевременно их обновлять, отвечать за принятие
объявленного кода и выполнение всех шагов JavaScript/DOM , когда данные
изменяются.
Декларативные
представления сделают код более предсказуемым и упростят отладку. React не
затрагивает лишний раз сами элементы DOM-дерева. Для оптимизации он использует
такой термин как Virtual DOM.
Использовать
и перестраивать каждый раз реальное DOM дерево затратно из-за тяжеловесных
узлов. Как только появилось понятие DOM, тогда элементы сайта менялись намного
реже, чем сейчас. Обычные методы, как document.getElementsByClassName()
подходят для небольшого количества изменений и в таких случаях обычно проще
перестроить все дерево, чем искать где DOM обновил элемент, а где удалил или
создал новый, но не сейчас, когда информации на сайтах достаточно много и она
обновляется регулярно. Для решения этой проблемы facebook придумал концепт
Virtual DOM или VDOM — это концепция программирования, в которой идеальное или
«виртуальное» представление пользовательского интерфейса хранится в памяти и
синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM.
Другими словами, React изучает старое DOM дерево и новое VDOM дерево, совершает
эвристическое сопоставление между ними и изменяет реальный DOM с минимальными
затратами, а именно посылает один пакет данных. Этот процесс называется
согласованием.
Есть еще одно понятие, которое неразрывно связанно с React — это JSX. JSX — это расширение языка JavaScript. Используя его, пользователь объясняет React, как и из чего будет состоять пользовательский интерфейс. React имеет глобальную идею – логика отображения тесно связана с остальной логикой пользовательского интерфейса: как надо реагировать на те или иные события, как данные должны рендерится и т.д. Один из главных плюсов JSX так это то, что все JSX-строки кода будут выглядеть, как вызов JavaScript функции, следовательно, выглядят, как объект JavaScript. Из этого вытекает, что допустимо использование любых корректных JavaScript-выражений, условные операторы, циклы и другие возможности JavaScript.
Так
же JSX имеет некоторую безопасность. Данные, которые вводит пользователь можно
использовать, не боясь перехвата данных. React DOM экранирует все значения, а
не выполняет их, до того, как отображать их. Это дает защиту от инъекции чужого
кода в проект. JSX оберегает веб-приложение от атаки межсайтовым скриптингом,
так как перед рендером он превращает все в строчки кода.
Существует
необязательные особенности React.
State используется для того, чтобы компонент мог обновлять сам себя.
«Состояние» очень похоже пропсы, отличие в том, что состояние контролируется и
доступно только конкретному компоненту. Объявляется такое состояние в
конструкторе класса, в котором мы объявляем начальное состояние.
Стоит
запомнить, что передается props родительскому или базовому конструктору.
Компоненты-классы всегда должны вызывать конструктор родителей. Для обновления
состояния существует this.setState(). Важно знать три детали о правильном
применении setState():
1)
Ни в коем случае не изменять состояние руками.
2)
Обновления состояния могут быть асинхронными
3)
Обновления состояния объединяются.
Если
состояние изменять оператором присваивания, в течении работы кода класса, то
повторный рендер элемента происходить не будет. Вместо этого надо использовать
setState(). Конструктор — это единственное место, где вы можете присвоить
значение this.state напрямую. this.props и this.state обновляются асинхронно,
поэтому React объединяет несколько вызовов setState() в одно обновление для
улучшения производительности. Так как пропсы и состояние обновляются
своевременно, то хорошая практика: не вычислять новые значения, исходя из
старых, но существует решение этой проблемы. Использовать параметром метода
setState – функцию, а не объект.
Это
еще не все перечисленные преимущества React, в сравнении с другими библиотеками, но
основополагающие для начала использования его, как основой клиентского
интерфейса.