Javscript

React Hooks ile Meteor Nasıl Kullanılır | tarafından Henrique A Schmaiske | Haz, 2022

React kancalarıyla Meteor nasıl kullanılır?

tepki-meteor-veri paketi, React ve React arasında entegrasyon sağlar. Tracker, Meteor’un reaktif veri sistemi. Meteor + React ile yazılım oluşturuyorsanız, basit bir yol ve sahip olunması gereken bir paket.

uygulamanızı kullanarak oluşturduysanız meteor create ... bunu zaten varsayılan olarak yüklemişsinizdir, bu nedenle bu adımı atlayabilirsiniz.

Paketi kurmak için şunu kullanın: meteor add:

meteor add react-meteor-data

Ayrıca yüklemeniz gerekecek react henüz yapmadıysanız:

meteor npm install react

hakkında sadece kısa bir açıklama useTracker zihninizi yenilemek için:

kullanabilirsiniz useTracker React “fonksiyon bileşenlerinizde” Tracker reaktif işlevinin değerini almak için kanca. Reaktif fonksiyon, reaktif girdileri değiştiğinde yeniden çalışacak ve bileşen yeni değerle yeniden oluşturulacaktır.

Temel olarak, sunucudan veri alma ve bir şey değiştiğinde onu güncel tutma yönteminizdir.

Pakette 2 yeni kancamız var, bunlar eklendi v2.4.0, 2021–12–02.

React’in kavramlarına mümkün olduğunca yakın olacak ve bakımı daha kolay olacak şekilde yaratıldılar.

kullanAbone ol → Abonelikler için uygun bir paketleyici.

useSubscribe abonelik oluşturmak için uygun bir kısayoldur. ile çalışırken özellikle yararlıdır. useFindabonelikleri ayarlamak için KULLANILMAMALIDIR. Özünde, çok basit bir sarmalayıcıdır. useTracker (deps olmadan) aboneliği güvenli bir şekilde oluşturmanızı sağlar ve fabrika tanımlama ve deps tanımlama ile ilgili bazı törenlerden kaçınmanıza olanak tanır. Sadece aboneliğinizin adını ve argümanlarınızı iletin.

kullanBul → Listelerinizi hızlandırın

bu useFind hook, mongo sorgularından (aboneliklerden) gelen listelerin oluşturulmasını (ve yeniden oluşturulmasını) önemli ölçüde hızlandırabilir. Bunu, belge nesne referanslarını kontrol ederek yapar. Kanca içinde son derece özel imleç yönetimi sağlayarak, Cursor.observe API, useFind yalnızca bir DDP güncellemesi sırasında değiştirilen nesne referanslarını dikkatlice günceller. Bu yaklaşım, liste oluşturma işlemlerinizi turbo şarj etmek için temel React araçlarının ve felsefelerinin daha sıkı bir şekilde kullanılmasına olanak tanır. Daha genel amaçlı olandan çok farklı bir yaklaşımdır. useTrackerve biraz daha fazla kurulum gerektirir. Dikkate değer bir fark, ARAMAMANIZDIR. .fetch(). useFind fabrikasını iade etmesini gerektirir Mongo.Cursor nesne. Ayrıca dönebilirsin nullİmleci koşullu olarak ayarlamak istiyorsanız.

İkisinin birlikte çalıştığı örnek kod:

// Note: isLoading is a function!
const isLoading = useSubscribe('posts', groupId);
const posts = useFind(() => Posts.find({ groupId }), [groupId]);
if (isLoading()) {
return <Loading />
} else {
return <ul>
{posts.map(post => <li key={post._id}>{post.title}</li>)}
</ul>
}

TL; DR:

useFind daha yüksek performans senaryoları için kullanımı daha kolaydır useTracker. Bul sorgunuzdan size referans sabit bir öğe listesi verir ve bunu, oluşturulan listenizdeki öğeleri not almak için kullanabilirsiniz. 10 maddelik bir sayfayı 500 listeye eklerseniz, tepkinin sadece yeni 10’u oluşturması gerekecek, diğerleri yeniden oluşturulmayacak. Tek bir belge güncellenirse, yalnızca o 1 öğenin yeniden oluşturulması gerekir. Uzlaştırıcı, referans kararlılığı nedeniyle gerisini atlayabilir.

useSubscription şu anda sadece ince bir sargı useTracker bu nedenle, ortak bilgiler olmadan abonelikleri ayarlamak kolaydır. useTracker

büyük teşekkürler KaptanN paketi korumak için ve hikaye anlatıcısıCZ ve William Kelley son aylarda katkıda bulunmak için.

Referans: https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu