Blog

Functional Component Nedir?
05

Ocak

  • 05 Ocak 2024
  • Yorum

Vue.js functional components, genellikle state (durum) yönetimi olmayan ve yalnızca girdi alıp çıktı üreten basit bileşenlerdir. Bu tür bileşenler, işlevsel programlamaya daha yakın bir yaklaşımla tasarlanmıştır. İşlevsel bileşenler, bir durum (state) yönetimine ihtiyaç duymazlar ve giriş aldıkları verilere dayanarak çıktı üretirler. Bu, fonksiyonel programlamanın temel prensiplerinden biridir.

Vue.js'de functional component'leri oluşturmak için, functional özelliğini kullanabilirsiniz. Bu özellik, bir bileşenin işlevsel olduğunu belirtir. İşlevsel bir bileşen, bir render fonksiyonu içerir ve durum (state) yönetimini gerektirmez.

  

      

          html
      

      

          
            
<template functional>

            
<div>

            
<p>{{ props.message }}</p>

            
<button @click="props.onClick">Click me</button>

            
</div>

            
</template>

            
            
<script>

            
export default {

            
functional: true,

            
props: {

            
message: String,

            
onClick: Function,

            
},

            
};

            
</script>

Yukarıdaki örnekte, functional: true özelliği işlevsel bir bileşen olduğunu belirtir. props bölümünde, bileşene geçirilecek veriler tanımlanır. Daha sonra, bu verilere dayanarak basit bir içerik oluşturulur.

İşlevsel bileşenler genellikle daha hızlıdır, çünkü durum yönetimi ve yaşam döngüsü kancaları gibi özelliklerden yoksundur. Bu nedenle, basit görevleri yerine getirmek için kullanılırlar. Ancak, işlevsel bileşenler, duruma ihtiyaç duyulduğunda ve karmaşık durum yönetimi gerektiren bileşenlerle birlikte kullanılabilir.

İLK SEN YORUM YAP

E-posta hesabınız yayımlanmayacak.*

Kategoriler

Son Yazılar

E-BÜLTEN