Что такое Реакт?

React — это библиотека, используемая для пользовательского интерфейса приложения. Ориентирован на SPA (одностраничные приложения). Он используется во многих топовых продуктах, от Instagram от Facebook до Netflix и теперь даже в новой части wp-admin на wordpress.com.

Основная концепция React, выкристаллизовавшаяся за последний год, заключается в том, что то, что фактически отображает пользовательский интерфейс, может быть отделено от логического потока управления пользовательским интерфейсом. Эта мысль привела к тому, что рендеринг пользовательского интерфейса в браузере был выделен в отдельный модуль, который теперь называется React-Dom. Есть и другие, такие как React-Canvas, который используется флипбордом, который позволяет отображать пользовательский интерфейс на холсте, и, наконец, react-native, который генерирует пользовательский интерфейс с собственными компонентами на iOS и Android.

Виртуальный дом

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

Это, в свою очередь, позволило создавать пользовательские интерфейсы на основе состояния данных. Это означает, что вы определяете состояние как данные, и на основе этих данных отображается пользовательский интерфейс.

Концептуальная разница с jQuery

Что противоположно тому, что вы делаете с jQuery. Сначала вы изменяете элемент dom, а затем, в редких случаях, вы сохраняете измененное значение/состояние либо в объекте Javascript, либо даже в элементе DOM с атрибутом data-. В сложном пользовательском интерфейсе существует множество перестановок и множество событий, изменяющих состояние пользовательского интерфейса, и обработка их со временем становится все более и более сложной.

Но в React пользовательский интерфейс построен на основе данных о состоянии, вы можете изменить это где угодно, и окончательный пользовательский интерфейс останется прежним. На самом деле вы можете сохранить состояние, скажем, на сервере, и когда вы снова создадите пользовательский интерфейс на основе этого состояния, вы можете быть уверены, что получите исходный пользовательский интерфейс. Этот факт и способность React отображать в виде строки благодаря VirtualDOM позволяет также создавать пользовательские интерфейсы на стороне сервера, которые теперь известны как универсальные приложения.

Но... но это будет так медленно!!

Это первая мысль. Вы имеете в виду, что когда я нажму на флажок, вся страница будет перерисована? Ну да и нет. Виртуальный DOM имеет алгоритмы сравнения и достаточно умен, чтобы знать, что изменилось, и обновлять только эту часть DOM. Хотя вам не нужно думать, вы просто устанавливаете состояние, которое представляет этот флажок как выбранный/не выбранный.

Первоначально опубликовано 3 ноября 2015 г.