VuReact ile Vue 3 Yaşam Döngüsü Kancalarını React'e Dönüştürme

Vue 3'ün güçlü yaşam döngüsü kancaları, bileşenlerinizin davranışını ince ayrıntılarıyla kontrol etmenizi sağlar. Peki bu kancaları React'e nasıl aktarabilirsiniz? VuReact, Vue 3 kodunu standart React bileşenlerine derleyerek geliştiricilere sorunsuz bir geçiş sunuyor. Bu rehberde, en yaygın Vue yaşam döngüsü kancalarının React karşılıklarını ve derleme sürecini adım adım inceleyeceğiz.

Temel Kavramları Anlamak

Bu rehberdeki örnekler, çekirdek mantığı vurgulamak için basitleştirilmiştir. Tüm Vue ve React kod parçaları, yalnızca yaşam döngüsü kancalarının davranışını gösterir; bileşen sarmalayıcıları ve ilgili yapılandırmalar dahil edilmez. Ayrıca, onMounted, onBeforeMount, onBeforeUpdate gibi Vue 3 yaşam döngüsü kancalarına aşina olduğunuz varsayılıyor.

Yaşam Döngüsü Kancalarının Eşleştirilmesi

onMounted() → useMounted()

Vue'un onMounted() kancası, bileşenin ilk kez eklendiğinde çalıştırılması gereken kodu tanımlar. Sık kullanılan senaryolar arasında API istekleri, abonelikler ve DOM ayarları bulunur.

• Vue Kodu

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

onMounted(() => {
  console.log('Bileşen eklendi');
});
</script>

• Derlenmiş React Kodu

import { useMounted } from '@vureact/runtime-core';

useMounted(() => {
  console.log('Bileşen eklendi');
});

VuReact'in useMounted() fonksiyonu, Vue'un onMounted() kancasının davranışını birebir korur ve bileşen eklendikten hemen sonra çalıştırılmasını sağlar.

onBeforeMount() → useBeforeMount()

onBeforeMount(), bileşenin ilk kez eklenmeden hemen önce çalıştırılması gereken kodu tanımlar. Bu kanca, DOM'a erişmeden önceki son ayarlara ihtiyaç duyduğunuz durumlarda kullanışlıdır.

• Vue Kodu

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

onBeforeMount(() => {
  console.log('Bileşen eklenmek üzere');
});
</script>

• Derlenmiş React Kodu

import { useBeforeMount } from '@vureact/runtime-core';

useBeforeMount(() => {
  console.log('Bileşen eklenmek üzere');
});

VuReact'in useBeforeMount() fonksiyonu, Vue'un onBeforeMount() kancasının hassasiyetini React'e aktarır.

onBeforeUpdate() → useBeforeUpdate()

onBeforeUpdate() kancası, bileşenin ilk eklenme dışındaki her güncellemeden önce çalıştırılır. Bu kancayı, bir sonraki render işleminden önce durumu incelemek veya hazırlamak için kullanabilirsiniz.

• Vue Kodu

<script setup>
import { reactive, onBeforeUpdate } from 'vue';

const state = reactive({ count: 0 });

onBeforeUpdate(() => {
  console.log('Güncellemeden önce, sayı:', state.count);
});
</script>

• Derlenmiş React Kodu

import { useReactive, useBeforeUpdate } from '@vureact/runtime-core';

const state = useReactive({ count: 0 });

useBeforeUpdate(
  () => {
    console.log('Güncellemeden önce, sayı:', state.count);
  },
  [state.count],
);

VuReact, useBeforeUpdate() fonksiyonu için bağımlılık dizisini otomatik olarak derleme sırasında analiz eder ve ekler. Böylece React'in useEffect() fonksiyonuna benzer bir davranış elde edilir.

onUpdated() → useUpdated()

onUpdated() kancası, bileşen güncellendikten hemen sonra çalıştırılır. Bu kanca, son render sonucunu okumak veya takip eden senkronizasyon işlemlerini tetiklemek için kullanılır.

• Vue Kodu

<script setup>
import { reactive, onUpdated } from 'vue';

const state = reactive({ count: 0 });

onUpdated(() => {
  console.log('Güncellemeden sonra, sayı:', state.count);
});
</script>

• Derlenmiş React Kodu

import { useReactive, useUpdated } from '@vureact/runtime-core';

const state = useReactive({ count: 0 });

useUpdated(
  () => {
    console.log('Güncellemeden sonra, sayı:', state.count);
  },
  [state.count],
);

VuReact'in useUpdated() fonksiyonu, Vue'un onUpdated() kancasının davranışını doğrudan React'e aktarır. Gerekli bağımlılıklar derleme sırasında otomatik olarak algılanır.

onBeforeUnmount() → useBeforeUnMount()

onBeforeUnmount() kancası, bileşenin kaldırılmadan hemen önce çalıştırılması gereken temizlik veya kaydetme işlemleri için kullanılır.

• Vue Kodu

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

onBeforeUnmount(() => {
  console.log('Bileşen kaldırılmak üzere');
});
</script>

• Derlenmiş React Kodu

import { useBeforeUnMount } from '@vureact/runtime-core';

useBeforeUnMount(() => {
  console.log('Bileşen kaldırılmak üzere');
});

VuReact'in useBeforeUnMount() fonksiyonu, Vue'un onBeforeUnmount() kancasının hassasiyetini React'e aktarır.

onUnmounted() → useUnmounted()

onUnmounted() kancası, bileşenin tamamen kaldırılmasından sonra son temizlik işlemlerini gerçekleştirmek için kullanılır. Bellek sızıntılarını önlemek ve kaynakları serbest bırakmak için ideal bir noktadır.

• Vue Kodu

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

onUnmounted(() => {
  console.log('Bileşen kaldırıldı');
});
</script>

• Derlenmiş React Kodu

import { useUnmounted } from '@vureact/runtime-core';

useUnmounted(() => {
  console.log('Bileşen kaldırıldı');
});

VuReact'in useUnmounted() fonksiyonu, Vue'un onUnmounted() kancasının davranışını birebir korur ve bileşen DOM'dan silindikten sonra çalıştırılmasını sağlar.

Sonuç ve Gelecek Adımlar

VuReact, Vue 3'teki yaşam döngüsü kancalarını React'e derleyerek geliştiricilere daha geniş bir ekosisteme sorunsuz bir geçiş imkanı sunuyor. Bu sayede Vue projelerinizi React'e taşıyabilir, aynı zamanda React'in performansı ve araç desteğinden faydalanabilirsiniz. Gelecekte VuReact'in daha fazla Vue özelliğini destekleyerek geliştirme sürecini daha da basitleştirmesi bekleniyor. Projeyi yakından takip etmeyi ve Vue'dan React'e geçiş yapmayı düşünen geliştiriciler için bu aracın ne kadar değerli olduğunu keşfetmeyi unutmayın.