React mı Vue mu: Yan Yana Kodla Farklar

React ve Vue, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan JavaScript araçlarıdır (React kendine bir kütüphane, Vue ise aşamalı bir framework der) ve fikirlerin çoğunu paylaşırlar: props aşağı, olaylar yukarı, reaktif state, bir sanal DOM. Pratik farklar şunlardır: React işaretlemeyi JSX'te yazar ve state'in bir setter ile yerine konmasını bekler; Vue ise işaretlemeyi tek dosyalı bileşenlerin içindeki HTML şablonlarına yazar ve reaktif değerleri doğrudan değiştirmene izin verir. İşte React'te bir sayaç:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Ve aynı sayaç bir Vue tek dosyalı bileşeni (Counter.vue) olarak:

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
    <button @click="count++">Clicked {{ count }} times</button>
</template>

useState(0), ref(0) olur; onClick, @click olur; {count} de {{ count }} olur. Görünür fark count++'tır: Vue değeri yerinde değiştirmene izin verir ve reaktivite sistemi bunu fark eder. React'in setCount'a ihtiyacı vardır, çünkü yalnızca ona yeni bir değer verdiğinde yeniden render eder.

JSX ve tek dosyalı bileşenler

Bir React bileşeni JSX döndüren bir JavaScript fonksiyonudur. Koşullar && ya da bir ternary'dir, listeler .map()'tir ve stiller ne seçersen ondan gelir (CSS dosyaları, CSS modülleri, bir utility framework'ü).

Bir Vue bileşeni genellikle üç bloklu bir .vue dosyasıdır: mantık için <script setup>, işaretleme için <template> ve CSS'i yalnızca o bileşene uygulanan isteğe bağlı bir <style scoped>. Şablonlar direktifler kullanır: v-if, v-for, iki yönlü input bağlama için v-model, bir değeri bağlamak için :prop ve dinlemek için @event. Şablonlar işaretlemeyi HTML bilen herkes için okunabilir tutar; JSX ise işaretlemede sana JavaScript'in tamamını verir. Vue JSX de kullanabilir ve React şablon kullanamaz, ama her birindeki kodun çoğu kendi varsayılanını izler.

İşte karşılaştırılacak ikinci özellik, filtrelenmiş bir liste.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Boş mesajı görmek için xyz yazmayı dene, sonra sil. Vue sürümü:

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

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
const query = ref('');

const visible = computed(() =>
    fruits.filter((f) => f.toLowerCase().includes(query.value.toLowerCase()))
);
</script>

<template>
    <input v-model="query" placeholder="Filter fruit" />
    <ul>
        <li v-for="fruit in visible" :key="fruit">{{ fruit }}</li>
        <li v-if="visible.length === 0">No match</li>
    </ul>
</template>

v-model, value artı onChange çiftinin yerini alır, computed de düz değişkenin. React'te visible her render'da yeniden hesaplanır, çünkü bileşen fonksiyonu yeniden çalışır; Vue'da computed onu önbelleğe alır ve yalnızca query değiştiğinde yeniden hesaplar. İkisi de liste öğelerini ayırt etmek için bir key kullanır.

Reaktivite modeli

İkisi arasındaki en derin fark budur.

React: değişmez state ve yeniden render'lar. State bir anlık görüntüdür. Bir setter'ı yeni bir değerle çağırırsın, React bileşen fonksiyonunu yeniden çalıştırır, yeni JSX'i eskisiyle karşılaştırır ve DOM'u günceller. React değerleri Object.is ile karşılaştırır, bu yüzden bir nesneyi ya da diziyi yerinde değiştirip aynısını geri aktarmak hiç değişiklik yokmuş gibi görünür.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['one']);

    function mutate() {
        items.push('pushed');
        setItems(items);
    }

    function replace() {
        setItems([...items, 'added']);
    }

    return (
        <div>
            <button onClick={mutate}>push() in place</button>
            <button onClick={replace}>New array</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

"push() in place"e tıkla; ekranda hiçbir şey değişmez, çünkü dizi aynı nesnedir. Sonra "New array"e tıkla: render pushed'u da gösterir, çünkü önceki mutation gerçekten oldu, React'in sadece bakmak için bir nedeni yoktu. useState sayfası bu kalıbı derinlemesine anlatıyor.

Vue: değiştirilebilir reaktif değerler. Bir ref ya da reactive nesne onu kimin okuduğunu kaydeder (bir ref, .value getter'ı aracılığıyla; bir reactive nesne bir proxy aracılığıyla). Ona yazdığında Vue hangi computed değerlerin, watcher'ların ve şablon parçalarının ona bağlı olduğunu tam olarak bilir ve yalnızca onları günceller. Vue'da items.value.push('pushed') ekranı günceller. Daha az tören yazarsın ve bir değerin elinin altında asla değişmeyeceği garantisinden vazgeçersin.

Hiçbir model tipik uygulamalar için önemli olacak şekilde daha hızlı değildir. React değişiklik başına daha fazla bileşen kodu çalıştırabilir ve işi atlamak için memoization'a (elle ya da React Compiler aracılığıyla) güvenir; Vue bağımlılıkları çalışma anında takip eder, bu yüzden o işi varsayılan olarak atlar.

Composition API ve hook'lar

Vue 3'ün Composition API'si ve React hook'ları aynı sorunu çözer: ilişkili state'i ve mantığı bir araya koymak ve bileşenler arasında yeniden kullanmak. Vue yeniden kullanılabilir fonksiyonlara composable (useMouse()), React ise özel hook (useMouse()) der. Kurallar kodun ne zaman çalıştığı nedeniyle farklıdır.

• Ne zaman çalışır. Bir Vue setup'ı bileşen oluşturulduğunda bir kez çalışır. Bir React bileşen fonksiyonu her render'da çalışır ve içindeki hook'lar onunla birlikte çalışır.
• Sıra kuralları. React hook'ları çağrı sırasına göre eşleştirir, bu yüzden onları koşulların ya da döngülerin içinde çağıramazsın. Vue'nun ref ve computed için böyle bir kuralı yoktur, çünkü setup bir kez çalışır.
• Bağımlılıklar. React efektleri ve memo'ları bağımlılıklarını senin bakımını yaptığın bir dizide listeler. Vue'nun watchEffect ve computed'u okuduklarını otomatik olarak takip eder.
• Eski değerler. Bir React callback'i daha önceki bir render'dan eski bir state değerini yakalayabilir (klasik setInterval hatası). Bir Vue callback'i count.value'yu çağrı anında okur ve her zaman mevcut değeri görür.

React'in modeli her render'ı props ve state'in saf bir fonksiyonu yapar; bunu test etmek ve üzerine düşünmek kolaydır. Vue'nun modeli ise bağımlılık dizileriyle ilgili bir hata sınıfını ortadan kaldırır. Birini bilen geliştiriciler genellikle diğerini hızla kavrar.

Ekosistem

O tablodaki kalıp: Vue'nun çekirdek ekibi yönlendiricinin, store'un ve devtools'un bakımını birlikte yapar, bu yüzden bir Vue projesinin her biri için bariz bir varsayılanı vardır. React bunları topluluğa bırakır; bu da sana daha fazla seçenek ve daha fazla karar verir. İkisinde de yeni projeler için olağan derleme aracı olan Vite, Vue'nun yaratıcısı tarafından başlatıldı.

Öğrenme eğrisi

Vue çoğu zaman daha yumuşak bir başlangıçtır. Şablonlar zaten bildiğin HTML gibi okunur, v-model kontrollü input kalıp kodunu ortadan kaldırır ve reaktif bir değer, onu değiştirdiğinde ekranı günceller. React ise baştan JSX'i ve değişmez güncelleme alışkanlığını ister; JSX sayfası çoğu kişinin ihtiyaç duyduğu ilk şeydir.

Temellerden sonra fark daralır. Vue kendi kavramlarını ekler (ref'ler ve reaktif nesneler, script'lerde .value ama şablonlarda değil, watcher'lar), React de efektleri, memoization'ı ve hook kurallarını ekler. Bölgendeki iş ilanları sözdiziminden daha yararlı bir eşitlik bozucudur.

Hangisi ne zaman seçilmeli

React'i şu durumlarda seç:

• Geniş bir topluluk kütüphanesi ve bileşen seçimi istiyorsan ya da React Native ile yerel mobil uygulamalar kurmayı planlıyorsan.
• Mantığı ve işaretlemeyi tek bir JavaScript fonksiyonunda tutmayı seviyorsan ve Next.js gibi bir framework istiyorsan.
• Ekibin, her render'ı izlemeyi kolaylaştıran açık, değişmez güncellemelere değer veriyorsa.

Vue'yu şu durumlarda seç:

• Yönlendirme ve state için resmi, uyumlu araçlar ve verilecek daha az karar istiyorsan.
• Ekibinde HTML şablonlarıyla rahat olan tasarımcılar ya da back-end geliştiricileri varsa.
• Mevcut, sunucuda render edilen sayfalara etkileşim ekliyorsan: Vue bir sayfaya bir script etiketinden eklenip oradan büyüyebilir.

İkisi de olgun ve her ölçekten şirket tarafından production'da kullanılıyor; birinde öğrendiğin kavramlar (bileşenler, props, türetilmiş state, key'li listeler) doğrudan diğerine taşınır.