React была самой популярной библиотекой переднего плана за последние несколько лет.
Vue - это интерфейсный фреймворк, который по популярности догоняет React, и его принимает невероятно страстное сообщество разработчиков.
Трудно выбрать между двумя фреймворками, поскольку у обоих есть свои плюсы и минусы. Выбирая одно из них, мы должны придерживаться его в течение нескольких лет.
В этой статье мы сравним атрибут настройки и отображение коллекций в React и Vue.
Установка атрибутов
С помощью React мы можем устанавливать такие атрибуты, как HTML. Но мы также можем установить динамические атрибуты в нашем приложении.
Например, для этого мы можем написать следующий код:
import React, { useState } from "react"; export default function App() { const [color, setColor] = useState("red"); const toggleColor = () => { setColor(color === "red" ? "green" : "red"); }; return ( <div className="App"> <button onClick={toggleColor}>Toggle</button> <div className="box" style={{ color }}> foo </div> </div> ); }
В приведенном выше коде мы динамически устанавливаем цвет div с помощью ловушки useState
, которая возвращает функцию setColor
, позволяющую нам установить цвет.
Затем мы передаем color
атрибуту style
. Чтобы установить статическое имя класса для нашего div, мы должны использовать атрибут className
. Когда мы устанавливаем атрибуты с помощью React, мы должны помнить о различиях типа className
вместо class
.
В Vue мы помещаем наши данные и методы в компонент и устанавливаем статические и динамические атрибуты следующим образом:
index.html
:
<!DOCTYPE html> <html lang="en"> <head> <title>App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="toggleColor">Toggle</button> <div class="box" :style="{color: color}"> foo </div> </div> <script src="index.js"></script> </body> </html>
index.js
:
const app = new Vue({ el: "#app", data: { color: "red" }, methods: { toggleColor() { this.color = this.color === "red" ? "green" : "red"; } } });
С Vue мы должны добавить метод toggleColor
к методу и значение по умолчанию для поля color
в объекте data
.
Затем мы должны добавить ту же логику для установки цвета в методе toggleColor
.
Это сложнее, чем то, что у нас есть с React. Однако он разделяет логику отображения и бизнес-логику на отдельные части.
С этим легче справиться, когда наши компоненты более сложные.
Отображение коллекций
Мы можем отображать коллекции с помощью React, сопоставляя наши массивы с коллекцией компонентов.
Например, если у нас есть массив имен, мы можем написать следующее, чтобы отображать их с помощью React:
import React, { useState } from "react"; export default function App() { const [persons] = useState([ { name: "Mary" }, { name: "John" }, { name: "Joe" } ]); return ( <div className="App"> {persons.map(p => ( <div>{p.name}</div> ))} </div> ); }
В приведенном выше коде у нас есть массив persons
, который затем сопоставляется с div с p.name
в качестве текстового содержимого.
Чтобы сделать то же самое с Vue, мы можем написать следующее:
index.html
:
<!DOCTYPE html> <html lang="en"> <head> <title>App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="p of persons"> {{p.name}} </div> </div> <script src="index.js"></script> </body> </html>
index.js
:
const app = new Vue({ el: "#app", data: { persons: [{ name: "Mary" }, { name: "John" }, { name: "Joe" }] } });
В приведенном выше коде у нас есть массив persons
в компоненте Vue и директива v-for
для отображения элементов в массиве persons
.
Это чище, чем у React. Мы сохраняем код в каждом файле более компактным.
Это будет еще более очевидным, если более сложные компоненты будут более сложными, что часто и имеет место.
Еще одна хорошая вещь в v-for
заключается в том, что мы можем использовать их также для перебора записей объекта.
Например, для этого мы можем написать следующее:
index.html
:
<!DOCTYPE html> <html lang="en"> <head> <title>App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="(age, name) in persons"> {{name}}: {{age}} </div> </div> <script src="index.js"></script> </body> </html>
index.js
:
const app = new Vue({ el: "#app", data: { persons: { John: 20, Mary: 19, Jane: 20 } } });
Мы можем получить значение и ключ записи объекта соответственно с помощью:
v-for="(age, name) in persons"
В React мы используем Object.entries
, чтобы делать то же самое:
import React, { useState } from "react"; export default function App() { const [persons] = useState({ John: 20, Mary: 19, Jane: 20 }); return ( <div className="App"> {Object.entries(persons).map(([name, age]) => ( <div> {name}: {age} </div> ))} </div> ); }
Выражение становится более сложным, так как мы должны вызвать Object.entries
, а затем сопоставить их с компонентом, который мы хотим визуализировать.
Вердикт
Для простых компонентов нет большой разницы между React и Vue, когда дело доходит до установки атрибутов.
Однако мы должны помнить, что все они написаны верблюжьим регистром, и имена могут отличаться от HTML.
У Vue здесь есть небольшое преимущество, так как нам не о чем беспокоиться. Динамические атрибуты могут быть установлены с помощью :
, а все остальное то же самое.
С Vue мы должны изучить директиву v-for
для рендеринга коллекций, в то время как мы просто используем простой JavaScript для этого с React.
Однако в React мы должны написать одно большое выражение для этого, а во Vue мы можем добавить директивы в шаблон для этого.
Это делает рендеринг коллекций более чистым с помощью Vue, поэтому Vue здесь также имеет небольшое преимущество.