В чем разница между React и Vue?

Разница между React и Vue

React и Vue — два самых популярных JavaScript фреймворка для построения интерактивных веб-приложений. Оба решают похожие проблемы, но с разными подходами.

Краткое сравнение

1. Синтаксис (главное отличие)

React использует JSX — JavaScript с вставленным HTML:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Счётчик: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

export default Counter;

Vue использует Single File Components — разделение HTML/CSS/JS:

<template>
  <div>
    <h1>Счётчик: {{ count }}</h1>
    <button @click="count++">
      Увеличить
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Для новичка: Vue проще — HTML и JS разделены. React требует привыкнуть к JSX.

2. Управление состоянием (State Management)

React требует выбирать инструмент:

// Встроенный useState
const [count, setCount] = useState(0);

// Или Redux для больших приложений
import { useSelector, useDispatch } from 'react-redux';
const count = useSelector(state => state.counter);
const dispatch = useDispatch();

// Или Context API
const CountContext = createContext();

Vue имеет встроенный Pinia (или Vuex):

// Встроенный data() и methods
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// Или встроенный Pinia
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  return { count };
});

Для новичка: Vue удобнее — состояние встроено в компонент.

3. Архитектурные подходы

React — JavaScript в центре

Всё в React — это JavaScript. Даже HTML (JSX) это функции JavaScript.

// JSX это синтаксический сахар для
React.createElement('div', null,
  React.createElement('h1', null, 'Привет'),
  React.createElement('button', { onClick: handleClick }, 'Клик')
);

// Поэтому в React можно делать что угодно
const components = [Button, Card, Modal];
const Component = components[0];

// Динамические компоненты
<Component {...props} />

Vue — разделение забот (Separation of Concerns)

В Vue HTML, JavaScript и CSS живут отдельно в одном файле.

<template>
  <!-- Только HTML/Vue синтаксис -->
</template>

<script>
// JavaScript логика
</script>

<style scoped>
/* CSS только для этого компонента -->
</style>

4. Производительность

React:

• Virtual DOM
• Требует оптимизации (useMemo, useCallback, React.memo)
• Большой bundle (~40KB)

Vue:

• Reactive system (более умный)
• Меньше нужна оптимизация
• Меньше bundle (~30KB)

// React требует мемоизацию для оптимизации
const MemoizedComponent = React.memo(Component);
const memoValue = useMemo(() => expensiveCalc(), [deps]);
const memoCallback = useCallback(() => { ... }, [deps]);

// Vue автоматически отслеживает зависимости
<template>
  <div>{{ computedValue }}</div>  <!-- Кэшируется автоматически -->
</template>

<script>
computed: {
  computedValue() {
    return this.a + this.b;  // Пересчитается только если a или b изменятся
  }
}
</script>

5. Хуки (React) vs Composition API (Vue)

React Hooks — введены в 2019:

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Загрузка...</div>;
  return <div>{user.name}</div>;
}

Vue Composition API — похожий подход:

<template>
  <div v-if="loading">Загрузка...</div>
  <div v-else>{{ user.name }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const user = ref(null);
    const loading = ref(true);

    onMounted(async () => {
      const data = await fetchUser();
      user.value = data;
      loading.value = false;
    });

    return { user, loading };
  }
};
</script>

6. Сообщество и экосистема

React:

• Больше нужно выбирать инструменты (роутер, стейт менеджер, формы)
• Огромное сообщество
• Много библиотек третьих сторон
• React Native для мобильных
• Используется в больших компаниях (Meta, Netflix, AirBnB)

Vue:

• Всё встроено (роутер, стейт менеджер уже в экосистеме)
• Меньше, но растущее сообщество
• Документация лучше
• NativeScript для мобильных
• Популярна в среди фрилансеров и стартапов

7. Примеры реальных проектов

React используют:

• Facebook, Instagram (Meta)
• Netflix
• AirBnB
• Uber
• Slack
• Discord

Vue используют:

• Alibaba
• Xiaomi
• Laravel (встроена в Breeze)
• Wordpress Gutenberg
• GitLab

8. Сложность проекта

Выбирай React если:

• Большой проект с сложной логикой
• Нужна максимальная гибкость
• Используешь React Native
• Нужен огромный экосистем
• Работаешь в большой компании

// React для сложных случаев
function ComplexApp() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const contextValue = useMemo(() => ({ state, dispatch }), [state]);

  return (
    <Context.Provider value={contextValue}>
      <App />
    </Context.Provider>
  );
}

Выбирай Vue если:

• Средний проект
• Хочешь учиться
• Нужна быстрая разработка
• Важна простота кода
• Фрилансинг или стартап

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '' };
  }
};
</script>

9. Кривая обучения

React:

1. JavaScript основы
2. JSX синтаксис
3. Virtual DOM
4. Хуки (useState, useEffect, etc)
5. Управление состоянием (Redux или Context)
6. Асинхронность

Vue:

1. HTML синтаксис (шаблоны)
2. v-bind, v-on, v-if
3. data, methods, computed
4. Lifecycle hooks
5. Компоненты
6. Роутинг (встроен)

Vue начинающим кажется проще — меньше чёрной магии.

10. TypeScript поддержка

React:

interface CounterProps {
  initialCount: number;
}

function Counter({ initialCount }: CounterProps) {
  const [count, setCount] = useState(initialCount);
  return <div>{count}</div>;
}

Vue:

<script lang="ts">
import { ref, defineComponent } from 'vue';

export default defineComponent({
  props: {
    initialCount: Number
  },
  setup(props: { initialCount: number }) {
    const count = ref(props.initialCount);
    return { count };
  }
});
</script>

Оба хорошо поддерживают TypeScript.

Резюме

React:

• Мощнее и гибче
• Больше выбора инструментов
• Кривая обучения выше
• Огромное сообщество
• Лучше для больших проектов

Vue:

• Проще в освоении
• Всё встроено
• Меньше boilerplate
• Отличная документация
• Лучше для быстрого прототипирования

Выбор зависит от проекта и личных предпочтений. Оба фреймворка отличные — научись одному, второй будет легче.