От автора: я работала с React в течение последних нескольких лет, сначала отдельно, затем совмещая с Redux и другими библиотеками из React-Universe (react-router, react-redux, prop-types и т. д.). Мне нравилось, насколько просто и удобно это было, и мой опыт работы с React был всегда приятным. Я счастлива жить в те времена, когда у нас есть много отличных инструментов, которые помогают быстрее и проще разрабатывать приложения.
В течение последних трех месяцев я создавала веб-приложение на Vue, и хочу поделиться своим опытом работы с Vue после того, как в течение нескольких лет я была преданным разработчиком React. Это не еще одно сравнение React или Vue, существует большое количество такого рода публикаций, в том числе официальная документация Vue. Это скорее личный опыт перехода от одной библиотеки к другой.
Надеюсь, этот пост будет полезен для людей, которые имеют дело с Vue и React, или для тех, кто как и я, привыкает к Vue после React, или просто хочет узнать больше об обоих.
Что-то среднее между React и Angular
Иногда Vue сравнивается с Angular даже больше, чем с React. В самом деле, первое, что вы видите при просмотре шаблонов Vue — это двухсторонние привязки и директивы, которые очень хорошо знакомы тем, кто использует Angular:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app-3"> <span v-if="seen">Now you see me</span> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> <button v-on:click="reverseMessage">Reverse Message</button> </div> |
Хотя Vue поддерживает JSX, установленный подход по-прежнему разделяет JavaScript и разметку. И хотя синтаксис React JSX в значительной степени является родным и отражает обычный синтаксис JavaScript, синтаксис шаблона в Vue очень продвинутый — он включает в себя директивы, сокращения и условный рендеринг, что делает Vue похожим на Angular, но имейте в виду, что в значительной степени на этом сходство и заканчивается.
Разумеется, было бы большим преимуществом использовать те же шаблоны, что и для Back-end (node.js / Pug), и для front-end (Vue / Pug), и ряд директив, которые предоставляет Vue, могут быть полезны, но тем не менее, для меня переход от React JSX к шаблонам Vue был (и до сих пор остается) болезненным.
Redux vs. Vuex
Обычно для приложений React используется с какой-то библиотекой потока данных, и самым популярным выбором является Redux. Аналогичная библиотека потока данных для Vue называется Vuex, и я была рада узнать, что она очень похожа на Redux. Действительно, переход от Redux к Vuex был практически безболезненным, поскольку две библиотеки имеют гораздо больше общего, чем сами React и Vue.
Основное различие заключается в том, что Redux в значительной степени полагается на неизменность состояния. Это происходит из-за того, что Redux был создан с учетом React, и хотя сам React может иметь дело с изменяемыми данными, рекомендуется избегать мутирующих значений, которые вы используете в качестве реквизита или состояния, чтобы оптимизировать работу React.
Когда в React изменяется состояние компонента, он запускает повторную визуализацию всего подкаталога компонента, начиная с этого компонента с правами root. Чтобы избежать ненужных повторных показов дочерних компонентов, вам нужно либо использовать PureComponent, либо реализовать shouldComponentUpdate, когда это возможно. Вам также может потребоваться использовать неизменяемые структуры данных, чтобы сделать изменения состояния более оптимизированными.
В то время как Vuex не заботится о неизменности состояния вообще.
В Vue связанные с компонентом зависимости автоматически отслеживаются во время рендеринга, поэтому система точно знает, какие компоненты действительно должны повторно отображаться при изменении состояния.
Отсюда вытекает несколько отличий в том, как компоненты React и Vue взаимодействуют с хранилищем, и я хотела бы побольше рассказать об этом.
Отправка и передача
Поток данных в Redux довольно строгий и простой. Компонент отправляет действие, которое возвращается с помощью функции создания действия. Затем редуктор возвращает новое состояние в соответствии с полученным действием. И в конце компонент выполняет прослушивание изменений состояния из хранилища и может получить доступ к свойствам состояния с помощью функции connect().
Каждое действие проходит через создателя действия. И хотя теоретически возможно отправлять действие непосредственно из компонента, это случается редко. Синтаксис самого действия побуждает нас инкапсулировать логику в функциях создателя действия, даже в случае самых тривиальных действий:
|
1 2 3 4 5 6 7 |
import { ADD_TODO, REMOVE_TODO } from '../actionTypes' function addTodo(text) { return { type: ADD_TODO, text } } |
Хотя поток данных в Vuex довольно похож, он не настолько строгий по количеству способов взаимодействия компонента с состоянием. Во-первых, компонент может отправить действие. Обычно это используется для создания асинхронных файлов, таких как выборка данных из исходного кода. После этого действие совершает мутацию. Функция мутации, аналогичная редуктору, — единственная, кому разрешено изменять состояние. Но есть и другой способ: компонент может совершить мутацию напрямую, и иногда очень заманчиво сокращать поток данных, полностью отбрасывая действия.
Дело не только в том, что передача мутации из компонента не является строго запрещенной, но документация Vuex даже поощряет использовать действия только в случаях асинхронности. Исходя из более строгого потока данных React, я верю в более строгое разделение задач — совершение мутации должно происходить только от действия, даже если оно синхронизировано или очень просто.
Если мы разрешаем компоненту создавать мутацию только посредством действия, всегда будет добавляться дополнительный слой между компонентом и мутацией, поддерживающий связь между ними и в конце концов код будет легче поддерживать и изменять.
Получение данных из хранилища
Чтобы иметь возможность взаимодействовать с хранилищем внутри компонентов React, следует использовать функцию connect(). И я думаю, что одна из самых неприятных вещей во всем потоке данных React / Redux принятие решение о том, какие компоненты должны использовать функцию connect(). Компоненты, в которых используется метод connect(), обычно называются контейнерами, они противоположны более простым одноразовым представлениям или «немым» компонентам.
Вы не можете использовать connect() слишком часто, потому что это довольно трудно, хотя, если вы будете использовать ее только для верхних компонентов, вы потеряете количество реквизитов, которые вам придется передавать вниз, чтобы ограничить доступ к ним. Данная проблема обсуждается здесь и здесь, но на самом деле даже при разумном количестве компонентов контейнера количество реквизитов, которые вы пропускаете вниз, остается довольно большим.
Учитывая эту проблему, я была приятно удивлена, обнаружив, что во Vue мне даже не нужно думать об этом. Хранилище доступно из каждого компонента Vue:
|
1 2 3 4 5 6 7 8 |
const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } } |
Это означает, что количество реквизитов, которые вы фактически передаете от одного компонента к другому, довольно ограничено и требуется только для данных, которые не хранятся в хранилище. Это довольно разумно, учитывая, что передача реквизита во Vue имеет очень неудобный синтаксис:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <todo-item :todo="todo"></todo-item> </div> </template> <script> import TodoItem from './TodoItem.vue' export default { components: { TodoItem }, data () { return { todo: { text: 'Learn Vue', isComplete: false } } } } </script> |
Здесь мы передаем реквизит дочернему компоненту (TodoItem) не тогда, когда он объявлен, а намного дальше внутри шаблона. Между тем, в React это происходит в одном месте более естественным образом — прямо при воспроизведении дочернего компонента:
|
1 2 3 4 5 6 7 |
class TodoList extends React.Component { render() { <div> <TodoItem todo={this.props.todo} /> </div> } } |
Несмотря на то, что передача реквизита в Vue более неудобна, хорошо, что из-за того, что хранилище доступно в каждом компоненте, количество реквизитов, которые вы действительно должны пройти, довольно незначительно по сравнению с React, где даже при достаточном количестве компонентов контейнера количество реквизитов, которые получают промежуточный компонент, довольно велико.
Обновление. Существует новый API контекста React Context, который обеспечивает способ передачи данных через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.
Заключение
Как я уже упоминала в начале этой статьи, это всего лишь ряд замечаний, которые я нашла наиболее значительными при переходе от React к Vue. Это не строгое сравнение, которое можно использовать для выбора одной библиотеки. Но если вы, как и я, должны переключаться с одной на другою или просто хотите найти дополнительную информацию в обеих библиотеках, это может быть полезно.
TL; DR
Vue не поставляется с JSX по умолчанию и довольно силен, благодаря концепции разделения скриптов и шаблонов
Redux и Vuex следуют аналогичной концепции потока данных
Redux сильно полагается на неизменность состояния, в то время как Vuex не заботится о неизменности состояния вообще
В Vue можно как отправлять, так и передавать действия непосредственно из компонента, но рекомендуется придерживаться более строгой модели и разрешать только отправку
Хранилище доступно непосредственно в каждом компоненте Vue
Автор: Anya Pavlova
Источник: //medium.com/
Редакция: Команда webformyself.
