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

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. useFind
abonelikleri 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. useTracker
ve 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