Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой "Flux", наткнулся на просторах интернета на две занимательные статьи: "ReactJS For Stupid People" и "Flux For Stupid People". Лично я люблю смотреть
видео уроки платные тут hackinfo.online и узнаю много нового.
TL;DR В течении долгого времени я пытался понять, что такое React и как он вписывается в структуру приложения. Это статья, которой мне в свое время не хватало.
Чем отличается React от Angular, Ember, Backbone и других? Как управлять данными? Как взаимодействовать с сервером? Что, черт возьми, такое JSX? Что такое "component"?
React часто упоминают в одном ряду с другими javascript фреймворками, но споры "React vs Angular" не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.
React дает вам язык шаблонов и некоторые callback-функции для отрисовки HTML. Весь результат работы React — это HTML. Ваши связки HTML/javascript, называемые компонентами, занимаются тем, что хранят свое внутреннее состояние в памяти например: какая закладка выбрана), но в итоге вам просто выплевывается HTML.
Разумеется, вы не можете построить полно функционирующее динамическое приложение только с React. Почему, мы рассмотрим позже.
Плюсы
После работы с React, я увидел три очень важных преимущества.
1. Вы всегда можете сказать, как ваш компонент будет отрисован, глядя на исходный код.
Это может быть важным преимуществом, хотя это ничем не отличается от шаблонов Angular. Давайте воспользуемся примером из реальной жизни.
Скажем, вам нужно изменить заголовок вашего сайта на имя пользователя после логина. Если вы не используете какой-либо MVC фреймворк, вы можете сделать что-то вроде:
<header>
<div class="name"></div>
</header>
$.post'/login', credentials, function user ) {
// Modify the DOM here
$'header .name').show).text user.name );
});
По опыту могу сказать, что этот код испортит жизнь вам и вашим коллегам. Как производить отладку? Кто изменяет заголовок? Кто имеет доступ к заголовку? Кто определяет видимость? Манипуляция с DOM так же плоха, как оператор GOTO в логике вашей программы.
Вот как вы могли бы сделать это с React:
render: function) {
return <header>
{ this.state.name ? <div>this.state.name</div> : null }
</header>;
}
Мы можем тут же сказать, как компонент будет отрисован. Если вы знаете состояние — вы знаете результат отрисовки. Вам не нужно прослеживать ход выполнения программы. Когда разрабатывается сложное приложение, особенно в команде, это очень важно.
2. Связывание javascript и HTML в JSX делает компоненты простыми для понимания.
Странное сочетание HTML/javascript может вас смутить. Нас учили не вставлять javascript в DOM например: обработчики onclick), еще в то время, когда мы были "крошечными" разработчиками ор: since we were wee developers). Но вы можете мне верить, работать с JSX компонентами это на самом деле замечательно.
Обычно вы разделяете представления HTML) и функциональность JavsScript). Это приводит к монолитному javascript файлу, содержащему всю функциональность для одной страницы, и вы должны следить за сложным потоком JS->HTML->JS->неприятная ситуация.
Связывание функциональности напрямую с разметкой и упаковка этого в портативный, автономный "компонент", сделает вас счастливее, а ваш код в целом лучше. Ваш Javasacript "хорошо знаком" с вашим HTML, так что смешивать их имеет смысл.
3. Вы можете рендерить React на сервере.
Если вы разрабатывает публичный сайт или приложение, и вы рендерите все на клиенте, то вы выбрали неправильный путь. Клиентский рендеринг — это причина, почему SoundCloud работает медленно, и почему Stack Overflow используя только серверный рендеринг) работает так быстро. Вы можете рендерить React на сервере, и вы должны этого делать.
Angular и другие поощряют использование PhantomJS для рендеринга страницы и предоставления ее поисковым движкам основываясь на user-агенте) или использование платных сервисов. ТЬФУ!
