Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bir React veya React Native geliştiricisi olarak, kap kavramını ve sunum bileşenlerini anlamak önemlidir.

Bu tasarım modelleri, endişelerin uygun şekilde ayrılmasına yardımcı olur. Kodunuzu daha sürdürülebilir ve ölçeklenebilir bir şekilde yapılandırmanızı sağlamak için bu kavramı kullanabilirsiniz.

Konteyner Bileşenleri Nelerdir?

Akıllı bileşenler olarak da bilinen kapsayıcı bileşenleri, uygulamanızdaki verileri ve mantığı yönetmekten sorumludur. Bir API'den veri alma, durumu güncelleme ve kullanıcı etkileşimlerini işleme gibi görevleri yerine getirirler.

Bu yapıyı uygulamak için kullanabilirsiniz React-Redux gibi bir kütüphane bileşenlerinizi mağazaya bağlamak ve verileri ve eylemleri alt bileşenlerinize veya sunum bileşenlerine iletmek için.

Sunum Bileşenleri Nelerdir?

Sunum bileşenleri, üst bileşenlerinden gelen verileri görüntülemekten sorumludur. Genellikle durum bilgisizdirler ve kullanıcı arayüzüne ve verilerin görsel temsiline odaklanırlar.

instagram viewer

Bu durum, manipüle edilmelerini ve test edilmelerini kolaylaştırır ve onlara aptal bileşenler adını kazandırır. Sunum bileşenlerinin aptal durumu, bunları tüm uygulamanızda yeniden kullanmanızı mümkün kılar. Bu, berbat ve tekrarlayan kodlardan kaçınır.

Kapsayıcı ve Sunum Bileşenlerini Neden Kullanmalı?

Sorunun kısa ve basit cevabı şudur: Endişelerin Ayrılması. Bu, nesne yönelimli, işlevsel ve görünüş yönelimli programlama dahil olmak üzere birçok paradigmada temel bir ilkedir. Ancak, birçok React geliştiricisi bu kavramları göz ardı etme ve sadece çalışan kod yazmayı tercih etme eğilimindedir.

Sadece çalışan kod, çalışmayı durdurana kadar harikadır. Kötü organize edilmiş kodun bakımı ve güncellenmesi daha zordur. Bu, yeni özellikler eklemeyi veya proje üzerinde çalışmak üzere başka programcıları getirmeyi zorlaştırabilir. Bu sorunları zaten oluşturulduktan sonra düzeltmek bir iş yüküdür ve daha en başından engellenirler.

Konteyner ve sunum bileşenleri tasarım modelinin uygulanması, projenizdeki her bileşenin üstlendiği net bir göreve sahip olmasını sağlar. Bu, uygulamanızı tamamlamak için optimize edilmiş her bileşenin bir araya geldiği modüler bir yapı sağlar.

Bileşenleriniz yine de çakışabilir; bir konteyner ile bir sunum bileşeni arasındaki görev dağılımı her zaman farklı değildir. Bununla birlikte, genel bir kural olarak, sunum bileşenlerinizi görsel verilere ve kapsayıcı bileşenlerinizi veri ve mantığa odaklamalısınız.

React Native'de Kapsayıcı ve Sunum Bileşenlerini Kullanma

Tipik bir React Native uygulamasında, hem sunum hem de mantıkla ilgili kod içeren bileşenler oluşturmak yaygındır. Tek bir sınıfta bir API'den veri alabilir, bir formun durumunu yönetebilir ve çıktıyı görüntüleyebilirsiniz. Yapacak basit bir uygulama düşünün bir API'den kullanıcıların bir listesini getir ve adlarını ve yaşlarını görüntüleyin.

Bunu tek bir bileşenle yapabilirsiniz, ancak bu, okunması zor, yeniden kullanılamayan ve test edilmesi ve bakımı daha zor olan bir kodla sonuçlanacaktır.

Örneğin:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Görünüm, Metin, Düz Liste } itibaren"tepki-yerli";
sabit Kullanıcı Listesi = () => {
sabit [kullanıcılar, setUsers] = useState([]);


 useEffect(() => {
sabit kullanıcıları getir = zaman uyumsuz () => {
sabit cevap = beklemek gidip getirmek(' https://example.com/users');
sabit veri = beklemek yanıt.json();
 setUsers (veri);
 };


 kullanıcıları getir();
 }, []);


geri dönmek (
 veri={kullanıcılar}
 keyExtractor={item => item.id}
 renderItem={({ öğe }) => (

İsim: {item.name}</Text>
Yaş: {item.age}</Text>
 </View>
 )}
 />
 );
};
ihracatvarsayılan Kullanıcı listesi;

Bu örnekte, Kullanıcı listesi bir giriş alanının durumunu yönetmekten, bir API'den veri almaktan ve verileri işlemekten sorumludur.

Bunu uygulamanın daha iyi ve verimli yolu, UserList'teki mantığı sunum ve kapsayıcı bileşenlerine ayırmaktır.

oluşturabilirsiniz UserListContainer kullanıcı verilerini almaktan ve yönetmekten sorumlu olan bileşen. Daha sonra bu verileri sunumsal bir bileşene iletebilir, Kullanıcı listesi, bir destek olarak.

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
// Konteyner Bileşeni
sabit UserListContainer = () => {
sabit [kullanıcılar, setUsers] = useState([]);


 useEffect(() => {
sabit kullanıcıları getir = zaman uyumsuz () => {
sabit cevap = beklemek gidip getirmek(' https://example.com/users');
sabit veri = beklemek yanıt.json();
 setUsers (veri);
 };


 kullanıcıları getir();
 }, []);


geri dönmek<Kullanıcı listesikullanıcılar={kullanıcılar} />;
};
ihracatvarsayılan UserListContainer;

Sunumu iki sunum bileşeni arasında ayırabilirsiniz: kullanıcı Ve Kullanıcı listesi. Her biri, aldıkları girdi öğelerine dayalı olarak basitçe işaretleme oluşturmaktan sorumludur.

içe aktarmak { Görünüm, Metin, Düz Liste } itibaren"tepki-yerli";
// Sunum Bileşeni
sabit kullanıcı = ({ isim yaş }) => (

İsim: {isim}</Text>
Yaş: {yaş}/Text>
 </View>
);
// Sunum Bileşeni
sabit Kullanıcı Listesi = ({ kullanıcılar }) => (
 veri={kullanıcılar}
 keyExtractor={item => item.id}
 renderItem={({ öğe }) => <kullanıcıisim={öğe adı}yaş={öğe.yaş} />}
 />
);

Yeni kod, orijinal bileşeni iki sunumsal bileşene ayırır, kullanıcı Ve Kullanıcı listesive bir kapsayıcı bileşeni, UserListContainer.

Kapsayıcı ve Sunum Bileşenlerini Uygulamaya Yönelik En İyi Uygulamalar

Kapsayıcı ve sunum bileşenleri kullandığınızda, bileşenlerin istendiği gibi çalışmasını sağlamak için bazı en iyi uygulamaları takip etmek önemlidir.

  1. Her bileşenin açık ve belirli bir rolü olmalıdır. Konteyner bileşeni durumu yönetmelidir ve sunum bileşeni görsel sunumu yönetmelidir.
  2. Mümkün olduğunda, sınıf bileşenleri yerine fonksiyonel bileşenleri kullanın. Daha basit, test edilmesi daha kolay ve daha iyi performans sağlıyorlar.
  3. Amacıyla ilgisi olmayan bir bileşene mantık veya işlevsellik eklemekten kaçının. Bu, bileşenlerin odaklı ve bakımı ve test edilmesi kolay kalmasına yardımcı olur.
  4. Bileşenler arasındaki iletişim için destekleri kullanın, endişeleri net bir şekilde ayırın ve birbirine sıkı sıkıya bağlı bileşenlerden kaçının.
  5. Durumda yapılan gereksiz güncellemeler performans sorunlarına yol açabilir, bu nedenle durumu yalnızca gerektiğinde güncellemek önemlidir.

Bu en iyi uygulamaları takip etmek, kapsayıcınızın ve sunum bileşenlerinizin birlikte verimli bir şekilde çalışmasını sağlar. React Native uygulamanızda durum ve görsel sunumu yönetmek için temiz, düzenli ve ölçeklenebilir bir çözüm sağlayın.

Konteyner ve Sunum Bileşenlerini Kullanmanın Faydaları

Kapsayıcı ve Sunum Bileşenleri çeşitli avantajlar sağlayabilir. Kod yapınızı, sürdürülebilirliğinizi ve ölçeklenebilirliğinizi geliştirmeye yardımcı olabilirler. Ayrıca ekipler arasında daha iyi işbirliği ve görev dağılımı sağlarlar. Hatta React Native uygulamanızın performansını ve optimizasyonunu artırabilirler.

Bu bileşenleri uygulamak için en iyi uygulamaları takip ederek daha iyi ve daha ölçeklenebilir React Native uygulamaları oluşturabilirsiniz.